Skip to content

fix(paragraph): migrate preview options to decorations #6425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mejo- merged 13 commits into from
Sep 19, 2024
Merged

fix(paragraph): migrate preview options to decorations #6425

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
28c3e0a
enh: add extractLinkParagraphs
max-nextcloud Sep 17, 2024
899886c
refactor(test): reuse link string
max-nextcloud Sep 17, 2024
4ab1cf8
enh(preview): include previews in list of link paragraphs
max-nextcloud Sep 17, 2024
2cb1c54
feat(previewOptions): Migrate preview options to prosemirror decorations
mejo- Sep 17, 2024
339dd63
chore(preview): Remove PreviewOptions from Paragraph and Preview
mejo- Sep 17, 2024
c76b6c0
enh(preview): add nodeSize in decoration data structure
max-nextcloud Sep 17, 2024
c635659
fix(preview): use deleteRange to remove the node
max-nextcloud Sep 17, 2024
1f40784
fix(preview): Fix alignment of preview options
mejo- Sep 17, 2024
c5fa33c
fix(paragraph): get rid of superfluous ParagraphView component
mejo- Sep 17, 2024
36d7954
fix(preview): Don't let preview options container overlay paragraph
mejo- Sep 18, 2024
a7d121f
fix(preview): Fix some linting issues
mejo- Sep 18, 2024
ae77d20
test(cy): Fix selectors for paragraphs in cypress tests
mejo- Sep 18, 2024
5d61e84
fix(preview): Further improvements
mejo- Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix(preview): Further improvements 
* Don't calculate preview options decorations in readonly editor
* Check for changed nodeSize when checking for decoration changes
* Rename `editor` to `$editor` in vue compontent, it's not reactive

Signed-off-by: Jonas <[email protected]>
  • Loading branch information
@mejo-
mejo- committed Sep 18, 2024
commit 5d61e8419654456b1295c72dd7e5ff63b259495e
8 changes: 4 additions & 4 deletions src/components/Editor/PreviewOptions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default {
type: Number,
required: true,
},
editor: {
$editor: {
type: Object,
required: true,
},
Expand All @@ -82,11 +82,11 @@ export default {

methods: {
onOpen() {
this.editor.commands.hideLinkBubble()
this.$editor.commands.hideLinkBubble()
},
toggle(type) {
this.open = false
const chain = this.editor.chain().focus()
const chain = this.$editor.chain().focus()
.setTextSelection(this.offset + 1)
if (type === 'text-only') {
chain.unsetPreview().run()
Expand All @@ -95,7 +95,7 @@ export default {
chain.setPreview().run()
},
deleteNode() {
this.editor.commands.deleteRange({
this.$editor.commands.deleteRange({
from: this.offset,
to: this.offset + this.nodeSize,
})
Expand Down
1 change: 0 additions & 1 deletion src/plugins/headingAnchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ export default function headingAnchor() {

state: {
init(_, { doc }) {
console.debug('headingAnchor init')
const headings = extractHeadings(doc)
return {
headings,
Expand Down
9 changes: 8 additions & 1 deletion src/plugins/previewOptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ export default function previewOptions({ editor }) {

state: {
init(_, { doc }) {
if (!editor.options.editable) {
return { decorations: DecorationSet.create() }
}
const linkParagraphs = extractLinkParagraphs(doc)
return {
linkParagraphs,
Expand All @@ -36,6 +39,9 @@ export default function previewOptions({ editor }) {
if (!tr.docChanged) {
return value
}
if (!editor.options.editable) {
return value
}
const linkParagraphs = extractLinkParagraphs(newState.doc)
const decorations = mapDecorations(value, tr, linkParagraphs) || linkParagraphDecorations(newState.doc, linkParagraphs, editor)
return { linkParagraphs, decorations }
Expand Down Expand Up @@ -96,6 +102,7 @@ function linkParagraphsChanged(current, prev) {
*/
const isDifferentFrom = (other) => (linkParagraph, i) => {
return linkParagraph.type !== other[i].type
|| linkParagraph.nodeSize !== other[i].nodeSize
}

/**
Expand Down Expand Up @@ -138,7 +145,7 @@ function decorationForLinkParagraph(linkParagraph, editor) {
*/
function previewOptionForLinkParagraph(linkParagraph, editor) {
const propsData = {
editor,
$editor: editor,
...linkParagraph,
}
const el = document.createElement('div')
Expand Down