feat: course card embedding plugin #2717
Conversation
OpenAPI ChangesShow/hide No detectable change.Unexpected changes? Ensure your branch is up-to-date with |
ahtesham-quraish
changed the title
ahtesham-quraish
changed the title
ahtesham-quraish
force-pushed
the
ahtesham/course-plugin
branch
from
31004d6 to
3af4fc4
Compare
| @@ -0,0 +1,10 @@ | |||
| .simple-editor-content .tiptap.ProseMirror .node-learningResource { | |||
There was a problem hiding this comment.
Can we style using @emotion/styled. The Sass files should be for vendor code only.
In ./components/TiptapEditor/components/tiptap-node/learning-resource-node/LearningResourceListCard.tsx you should be able to do:
const StyledLearningResourceListCard = styled(LearningResourceListCard)({
color: "inherit",
textDecoration: "none",
span:{
textDecoration: "none"
}
})
We may want to apply reset styles though if these are to override TipTap's css.
For styling elements other than our own components we can create a styled editor and target with nested selectors, e.g.
const StyledEditor = styled(TiptapEditor)({
".target-classname": {
...
}
})
jonkafton
left a comment
jonkafton
left a comment
There was a problem hiding this comment.
This works nicely. Can you please take a look at moving the styles and let's start separating vendor code from our own. We need to make sure it's very clear which code we've written and which has been provided by library templates. We'll be moving the TipTap simple template code into ./components/TipTap/vendor (please feel free to make this change).
One suggestion looks like this, though let's catch up with @ChristopherChudzicki and agree on the approach:
- Move code ejected from the tiptap simple editor into TipTapEditor/vendor/SimpleTemplate/
- Run the simple template again to ensure that code is untouched.
- The extension(s) we have added are moved to TipTapEditor/components.
- Agree a strict rule that vendor code cannot be changed. Extensions must be extended from existing or created fresh.
- Add a native git hook (works without pre-commit) that prevents changes to vendor files at their version.
| if (!url) return | ||
|
|
||
| // Extract `resource=XYZ` | ||
| const match = url.match(/resource=(\d+)/) |
There was a problem hiding this comment.
Can we also allow just the resource ID to be entered. It would be good to provide a resource search here, though we can leave that for a later iteration if others agree.
| console.log("URL received from modal:", url) | ||
| if (!url) return | ||
|
|
||
| // Extract `resource=XYZ` |
There was a problem hiding this comment.
| // Extract `resource=XYZ` | |
| // Extract `resource=123` |
|
|
||
| const handleEmbed = useCallback(async () => { | ||
| const url: string = await NiceModal.show(CourseUrlInputDialog) | ||
| console.log("URL received from modal:", url) |
| isVisible, | ||
| canInsert, | ||
| label, | ||
| Icon, // SVG icon (same as your media embed pattern) |
What are the relevant tickets?
In refernce to https://github.com/mitodl/hq/issues/9314
Description (What does it do?)
Want to provide content creators with the ability to insert course card inside the Tiptap editor.
The custom plugin should support adding course card inside the tiptap editor
Screenshots (if appropriate):
How can this be tested?
http://open.odl.local:8062/search?resource=297)