Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
29 changes: 29 additions & 0 deletions packages/layout-engine/painters/dom/src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4192,12 +4192,41 @@ export class DomPainter {
}
annotation.dataset.layoutEpoch = String(this.layoutEpoch);

this.appendAnnotationCaretAnchor(annotation, run);

// Apply SDT metadata
this.applySdtDataset(annotation, run.sdt);

return annotation;
}

/**
* Adds a hidden DOM anchor at pmEnd so caret placement after the annotation is correct.
*/
private appendAnnotationCaretAnchor(annotation: HTMLElement, run: FieldAnnotationRun): void {
if (!this.doc || run.pmEnd == null) return;

const caretAnchor = this.doc.createElement('span');
caretAnchor.dataset.pmStart = String(run.pmEnd);
caretAnchor.dataset.pmEnd = String(run.pmEnd);
caretAnchor.dataset.layoutEpoch = String(this.layoutEpoch);
caretAnchor.classList.add('annotation-caret-anchor');
caretAnchor.style.position = 'absolute';
caretAnchor.style.left = '100%';
caretAnchor.style.top = '0';
caretAnchor.style.width = '0';
caretAnchor.style.height = '1em';
caretAnchor.style.overflow = 'hidden';
caretAnchor.style.pointerEvents = 'none';
caretAnchor.style.userSelect = 'none';
caretAnchor.style.opacity = '0';
caretAnchor.textContent = '\u200B';
if (!annotation.style.position) {
annotation.style.position = 'relative';
}
annotation.appendChild(caretAnchor);
}

/**
* Renders a single line of a paragraph block.
*
Expand Down
1 change: 1 addition & 0 deletions packages/layout-engine/pm-adapter/src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ export const ATOMIC_INLINE_TYPES = new Set([
'footnoteReference',
'passthroughInline',
'bookmarkEnd',
'fieldAnnotation',
]);

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ReplaceStep } from 'prosemirror-transform';
import { findChildren } from '@core/helpers/findChildren';

export function findRemovedFieldAnnotations(tr) {
let removedNodes = [];
Expand Down Expand Up @@ -34,6 +35,17 @@ export function findRemovedFieldAnnotations(tr) {
}
});

if (removedNodes.length) {
const removedNodesIds = removedNodes.map((item) => item.node.attrs.fieldId);
const found = findChildren(
tr.doc,
(node) => node.type.name === 'fieldAnnotation' && removedNodesIds.includes(node.attrs.fieldId),
);
const foundSet = new Set(found.map((item) => item.node.attrs.fieldId));
const removedNodesFiltered = removedNodes.filter((item) => !foundSet.has(item.node.attrs.fieldId));
removedNodes = removedNodesFiltered;
}

return removedNodes;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,10 @@ export class ParagraphNodeView {
calculateResolvedParagraphProperties(this.editor, this.node, this.editor.state.doc.resolve(this.getPos()));

this.dom = document.createElement('p');
this.contentDOM = document.createElement('span');
const contentEl = document.createElement('span');
contentEl.classList.add('sd-paragraph-content');

this.contentDOM = contentEl;
this.dom.appendChild(this.contentDOM);
if (this.#checkIsList()) {
this.#initList(node.attrs.listRendering);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Plugin } from 'prosemirror-state';
import { Decoration, DecorationSet } from 'prosemirror-view';

const shouldAddLeadingCaret = (node) => {
if (node.type.name !== 'paragraph') return false;
if (node.childCount === 0) return false;
const first = node.child(0);
if (first.type.name === 'fieldAnnotation') return true;
if (first.type.name !== 'run') return false;
if (first.childCount === 0) return false;
return first.child(0).type.name === 'fieldAnnotation';
};

export function createLeadingCaretPlugin() {
const leadingCaretPlugin = new Plugin({
props: {
decorations(state) {
if (typeof document === 'undefined') return null;
const decorations = [];
state.doc.descendants((node, pos) => {
if (!shouldAddLeadingCaret(node)) return true;
const widgetPos = pos + 1;
const deco = Decoration.widget(widgetPos, () => document.createTextNode('\u200B'), {
key: `sd-leading-caret-${pos}`,
side: -1,
});
decorations.push(deco);
return false;
});
return decorations.length ? DecorationSet.create(state.doc, decorations) : null;
},
},
});
return leadingCaretPlugin;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// @ts-check
import { describe, it, expect } from 'vitest';
import { Schema } from 'prosemirror-model';
import { EditorState } from 'prosemirror-state';
import { createLeadingCaretPlugin } from './leadingCaretPlugin.js';

const schema = new Schema({
nodes: {
doc: { content: 'block+' },
blockquote: {
content: 'paragraph+',
group: 'block',
toDOM: () => ['blockquote', 0],
parseDOM: [{ tag: 'blockquote' }],
},
paragraph: {
content: 'inline*',
group: 'block',
toDOM: () => ['p', 0],
parseDOM: [{ tag: 'p' }],
},
run: {
content: 'inline*',
inline: true,
group: 'inline',
toDOM: () => ['span', { 'data-run': 'true' }, 0],
parseDOM: [{ tag: 'span[data-run]' }],
},
fieldAnnotation: {
inline: true,
group: 'inline',
atom: true,
toDOM: () => ['span', { 'data-field-annotation': 'true' }],
parseDOM: [{ tag: 'span[data-field-annotation]' }],
},
text: { group: 'inline' },
},
});

const buildDocWithNestedAnnotation = () => {
const paragraph = schema.nodes.paragraph.create(null, [
schema.nodes.run.create(null, [schema.nodes.fieldAnnotation.create(), schema.text('Hello')]),
]);
return schema.nodes.doc.create(null, [schema.nodes.blockquote.create(null, [paragraph])]);
};

describe('leadingCaretPlugin', () => {
it('adds a leading caret decoration for nested paragraphs', () => {
const doc = buildDocWithNestedAnnotation();
const plugin = createLeadingCaretPlugin();
const state = EditorState.create({ doc, schema, plugins: [plugin] });

const decorations = plugin.spec.props.decorations(state);

expect(decorations).not.toBeNull();
expect(decorations.find()).toHaveLength(1);
});
});
3 changes: 2 additions & 1 deletion packages/super-editor/src/extensions/paragraph/paragraph.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { toggleList } from '@core/commands/index.js';
import { restartNumbering } from '@core/commands/restartNumbering.js';
import { ParagraphNodeView } from './ParagraphNodeView.js';
import { createNumberingPlugin } from './numberingPlugin.js';
import { createLeadingCaretPlugin } from './leadingCaretPlugin.js';
import { createDropcapPlugin } from './dropcapPlugin.js';
import { shouldSkipNodeView } from '../../utils/headless-helpers.js';
import { parseAttrs } from './helpers/parseAttrs.js';
Expand Down Expand Up @@ -315,6 +316,6 @@ export const Paragraph = OxmlNode.create({
},
},
});
return [dropcapPlugin, numberingPlugin, listEmptyInputPlugin];
return [dropcapPlugin, numberingPlugin, listEmptyInputPlugin, createLeadingCaretPlugin()];
},
});
Loading