@harbour-enterprises/superdoc 0.22.0-next.9 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{PdfViewer-HN-tp5RN.es.js → PdfViewer-BNWaI4WI.es.js} +1 -1
- package/dist/chunks/{PdfViewer-DyWe33pN.cjs → PdfViewer-DpkgwUPi.cjs} +1 -1
- package/dist/chunks/{index-BeVpZc19.cjs → index-BbGPYtNy.cjs} +2 -2
- package/dist/chunks/{index-ir6efMuz.es.js → index-DWKEKmiB.es.js} +2 -2
- package/dist/chunks/{super-editor.es-BwqYS285.es.js → super-editor.es-BVxfhpAJ.es.js} +1581 -1274
- package/dist/chunks/{super-editor.es-CKfdmK-8.cjs → super-editor.es-BoUJEZaF.cjs} +1581 -1274
- package/dist/core/types/index.d.ts.map +1 -1
- package/dist/style.css +1 -0
- package/dist/super-editor/ai-writer.es.js +2 -2
- package/dist/super-editor/chunks/{converter-BgedUNCW.js → converter-C-yWLpFM.js} +150 -105
- package/dist/super-editor/chunks/{docx-zipper-ByLK3trM.js → docx-zipper-CmGlSUQM.js} +1 -1
- package/dist/super-editor/chunks/{editor-CFqh_xBx.js → editor-BBnC1DzI.js} +1436 -1172
- package/dist/super-editor/chunks/{toolbar-DdfyWgZF.js → toolbar-QJANo61B.js} +2 -2
- package/dist/super-editor/converter.es.js +1 -1
- package/dist/super-editor/docx-zipper.es.js +2 -2
- package/dist/super-editor/editor.es.js +3 -3
- package/dist/super-editor/file-zipper.es.js +1 -1
- package/dist/super-editor/src/core/helpers/generateDocxRandomId.d.ts +5 -0
- package/dist/super-editor/src/extensions/index.d.ts +2 -1
- package/dist/super-editor/src/extensions/structured-content/index.d.ts +1 -0
- package/dist/super-editor/src/extensions/structured-content/structured-content-commands.d.ts +67 -0
- package/dist/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentBlockTags.d.ts +6 -0
- package/dist/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentInlineTags.d.ts +6 -0
- package/dist/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTags.d.ts +6 -0
- package/dist/super-editor/src/extensions/structured-content/structuredContentHelpers/getStructuredContentTagsById.d.ts +7 -0
- package/dist/super-editor/src/extensions/structured-content/structuredContentHelpers/index.d.ts +4 -0
- package/dist/super-editor/style.css +1 -0
- package/dist/super-editor/super-editor.es.js +7 -7
- package/dist/super-editor/toolbar.es.js +2 -2
- package/dist/super-editor.cjs +1 -1
- package/dist/super-editor.es.js +1 -1
- package/dist/superdoc.cjs +2 -2
- package/dist/superdoc.es.js +2 -2
- package/dist/superdoc.umd.js +1581 -1274
- package/dist/superdoc.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -15005,6 +15005,10 @@ function generateDocxRandomId(length2 = 8) {
|
|
|
15005
15005
|
}
|
|
15006
15006
|
return id.join("");
|
|
15007
15007
|
}
|
|
15008
|
+
function generateRandomSigned32BitIntStrId() {
|
|
15009
|
+
const val = Math.floor(Math.random() * 2147483647);
|
|
15010
|
+
return val.toString();
|
|
15011
|
+
}
|
|
15008
15012
|
function generateRandom32BitHex() {
|
|
15009
15013
|
const val = Math.floor(Math.random() * 2147483647);
|
|
15010
15014
|
return val.toString(16).toUpperCase().padStart(8, "0");
|
|
@@ -22583,6 +22587,7 @@ const helpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
|
|
|
22583
22587
|
generateDocxListAttributes,
|
|
22584
22588
|
generateDocxRandomId,
|
|
22585
22589
|
generateRandom32BitHex,
|
|
22590
|
+
generateRandomSigned32BitIntStrId,
|
|
22586
22591
|
getActiveFormatting,
|
|
22587
22592
|
getExtensionConfigField,
|
|
22588
22593
|
getMarkRange,
|
|
@@ -28177,6 +28182,9 @@ function handleStructuredContentNode(params2) {
|
|
|
28177
28182
|
const node = nodes[0];
|
|
28178
28183
|
const sdtPr = node.elements.find((el) => el.name === "w:sdtPr");
|
|
28179
28184
|
const sdtContent = node.elements.find((el) => el.name === "w:sdtContent");
|
|
28185
|
+
const id = sdtPr?.elements?.find((el) => el.name === "w:id");
|
|
28186
|
+
const tag = sdtPr?.elements?.find((el) => el.name === "w:tag");
|
|
28187
|
+
const alias = sdtPr?.elements?.find((el) => el.name === "w:alias");
|
|
28180
28188
|
if (!sdtContent) {
|
|
28181
28189
|
return null;
|
|
28182
28190
|
}
|
|
@@ -28188,15 +28196,16 @@ function handleStructuredContentNode(params2) {
|
|
|
28188
28196
|
nodes: sdtContent.elements,
|
|
28189
28197
|
path: [...params2.path || [], sdtContent]
|
|
28190
28198
|
});
|
|
28191
|
-
|
|
28192
|
-
|
|
28193
|
-
sdtContentType = "structuredContentBlock";
|
|
28194
|
-
}
|
|
28199
|
+
const isBlockNode2 = paragraph || table;
|
|
28200
|
+
const sdtContentType = isBlockNode2 ? "structuredContentBlock" : "structuredContent";
|
|
28195
28201
|
let result = {
|
|
28196
28202
|
type: sdtContentType,
|
|
28197
28203
|
content: translatedContent,
|
|
28198
28204
|
marks,
|
|
28199
28205
|
attrs: {
|
|
28206
|
+
id: id?.attributes?.["w:val"] || null,
|
|
28207
|
+
tag: tag?.attributes?.["w:val"] || null,
|
|
28208
|
+
alias: alias?.attributes?.["w:val"] || null,
|
|
28200
28209
|
sdtPr
|
|
28201
28210
|
}
|
|
28202
28211
|
};
|
|
@@ -30454,21 +30463,55 @@ const generateSdtPrTagForDocumentSection = (id, title, tag) => {
|
|
|
30454
30463
|
};
|
|
30455
30464
|
function translateStructuredContent(params2) {
|
|
30456
30465
|
const { node } = params2;
|
|
30457
|
-
const { attrs = {} } = node;
|
|
30458
30466
|
const childContent = translateChildNodes({ ...params2, nodes: node.content });
|
|
30459
|
-
const
|
|
30460
|
-
|
|
30461
|
-
|
|
30462
|
-
elements: childContent
|
|
30463
|
-
}
|
|
30464
|
-
];
|
|
30465
|
-
nodeElements.unshift(attrs.sdtPr);
|
|
30467
|
+
const sdtContent = { name: "w:sdtContent", elements: childContent };
|
|
30468
|
+
const sdtPr = generateSdtPrTagForStructuredContent({ node });
|
|
30469
|
+
const nodeElements = [sdtPr, sdtContent];
|
|
30466
30470
|
const result = {
|
|
30467
30471
|
name: "w:sdt",
|
|
30468
30472
|
elements: nodeElements
|
|
30469
30473
|
};
|
|
30470
30474
|
return result;
|
|
30471
30475
|
}
|
|
30476
|
+
function generateSdtPrTagForStructuredContent({ node }) {
|
|
30477
|
+
const { attrs = {} } = node;
|
|
30478
|
+
const id = {
|
|
30479
|
+
name: "w:id",
|
|
30480
|
+
type: "element",
|
|
30481
|
+
attributes: { "w:val": attrs.id }
|
|
30482
|
+
};
|
|
30483
|
+
const alias = {
|
|
30484
|
+
name: "w:alias",
|
|
30485
|
+
type: "element",
|
|
30486
|
+
attributes: { "w:val": attrs.alias }
|
|
30487
|
+
};
|
|
30488
|
+
const tag = {
|
|
30489
|
+
name: "w:tag",
|
|
30490
|
+
type: "element",
|
|
30491
|
+
attributes: { "w:val": attrs.tag }
|
|
30492
|
+
};
|
|
30493
|
+
const resultElements = [];
|
|
30494
|
+
if (attrs.id) resultElements.push(id);
|
|
30495
|
+
if (attrs.alias) resultElements.push(alias);
|
|
30496
|
+
if (attrs.tag) resultElements.push(tag);
|
|
30497
|
+
if (attrs.sdtPr) {
|
|
30498
|
+
const elements = attrs.sdtPr.elements || [];
|
|
30499
|
+
const elementsToExclude = ["w:id", "w:alias", "w:tag"];
|
|
30500
|
+
const restElements = elements.filter((el) => !elementsToExclude.includes(el.name));
|
|
30501
|
+
const result2 = {
|
|
30502
|
+
name: "w:sdtPr",
|
|
30503
|
+
type: "element",
|
|
30504
|
+
elements: [...resultElements, ...restElements]
|
|
30505
|
+
};
|
|
30506
|
+
return result2;
|
|
30507
|
+
}
|
|
30508
|
+
const result = {
|
|
30509
|
+
name: "w:sdtPr",
|
|
30510
|
+
type: "element",
|
|
30511
|
+
elements: resultElements
|
|
30512
|
+
};
|
|
30513
|
+
return result;
|
|
30514
|
+
}
|
|
30472
30515
|
const XML_NODE_NAME$3 = "w:sdt";
|
|
30473
30516
|
const SD_NODE_NAME$3 = ["fieldAnnotation", "structuredContent", "structuredContentBlock", "documentSection"];
|
|
30474
30517
|
const validXmlAttributes$3 = [];
|
|
@@ -31529,7 +31572,7 @@ function translateShapeContainer(params2) {
|
|
|
31529
31572
|
const pict = {
|
|
31530
31573
|
name: "w:pict",
|
|
31531
31574
|
attributes: {
|
|
31532
|
-
"w14:anchorId":
|
|
31575
|
+
"w14:anchorId": generateRandomSigned32BitIntStrId()
|
|
31533
31576
|
},
|
|
31534
31577
|
elements: [shape]
|
|
31535
31578
|
};
|
|
@@ -31596,7 +31639,7 @@ function translateVRectContentBlock(params2) {
|
|
|
31596
31639
|
const pict = {
|
|
31597
31640
|
name: "w:pict",
|
|
31598
31641
|
attributes: {
|
|
31599
|
-
"w14:anchorId":
|
|
31642
|
+
"w14:anchorId": generateRandomSigned32BitIntStrId()
|
|
31600
31643
|
},
|
|
31601
31644
|
elements: [rect]
|
|
31602
31645
|
};
|
|
@@ -33096,7 +33139,7 @@ const DEFAULT_SECTION_PROPS = Object.freeze({
|
|
|
33096
33139
|
gutter: "0"
|
|
33097
33140
|
})
|
|
33098
33141
|
});
|
|
33099
|
-
function ensureSectionProperties(bodyNode
|
|
33142
|
+
function ensureSectionProperties(bodyNode) {
|
|
33100
33143
|
if (!bodyNode.elements) bodyNode.elements = [];
|
|
33101
33144
|
let sectPr = bodyNode.elements.find((el) => el.name === "w:sectPr");
|
|
33102
33145
|
if (!sectPr) {
|
|
@@ -36595,7 +36638,7 @@ var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "rea
|
|
|
36595
36638
|
var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
36596
36639
|
var __privateSet = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
|
|
36597
36640
|
var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
|
|
36598
|
-
var _Attribute_static, getGlobalAttributes_fn, getNodeAndMarksAttributes_fn, _Schema_static, createNodesSchema_fn, createMarksSchema_fn, _events, _ExtensionService_instances, setupExtensions_fn, attachEditorEvents_fn, _editor, _stateValidators, _xmlValidators, _requiredNodeTypes, _requiredMarkTypes, _SuperValidator_instances, initializeValidators_fn, collectValidatorRequirements_fn, analyzeDocument_fn, _commandService, _Editor_instances, initContainerElement_fn, init_fn, initRichText_fn, onFocus_fn, checkHeadless_fn, registerCopyHandler_fn, insertNewFileData_fn, registerPluginByNameIfNotExists_fn, createExtensionService_fn, createCommandService_fn, createConverter_fn, initMedia_fn, initFonts_fn, createSchema_fn, generatePmData_fn, createView_fn, onCollaborationReady_fn, initComments_fn, initPagination_fn, dispatchTransaction_fn, handleNodeSelection_fn, prepareDocumentForImport_fn, prepareDocumentForExport_fn, endCollaboration_fn, validateDocumentInit_fn, validateDocumentExport_fn, initDevTools_fn,
|
|
36641
|
+
var _Attribute_static, getGlobalAttributes_fn, getNodeAndMarksAttributes_fn, _Schema_static, createNodesSchema_fn, createMarksSchema_fn, _events, _ExtensionService_instances, setupExtensions_fn, attachEditorEvents_fn, _editor, _stateValidators, _xmlValidators, _requiredNodeTypes, _requiredMarkTypes, _SuperValidator_instances, initializeValidators_fn, collectValidatorRequirements_fn, analyzeDocument_fn, _commandService, _Editor_instances, initContainerElement_fn, init_fn, initRichText_fn, onFocus_fn, checkHeadless_fn, registerCopyHandler_fn, insertNewFileData_fn, registerPluginByNameIfNotExists_fn, createExtensionService_fn, createCommandService_fn, createConverter_fn, initMedia_fn, initFonts_fn, createSchema_fn, generatePmData_fn, createView_fn, onCollaborationReady_fn, initComments_fn, initPagination_fn, dispatchTransaction_fn, handleNodeSelection_fn, prepareDocumentForImport_fn, prepareDocumentForExport_fn, endCollaboration_fn, validateDocumentInit_fn, validateDocumentExport_fn, initDevTools_fn, _DocumentSectionView_instances, init_fn2, addToolTip_fn, _ListItemNodeView_instances, init_fn3, _FieldAnnotationView_instances, createAnnotation_fn, _AutoPageNumberNodeView_instances, renderDom_fn, scheduleUpdateNodeStyle_fn;
|
|
36599
36642
|
var GOOD_LEAF_SIZE = 200;
|
|
36600
36643
|
var RopeSequence = function RopeSequence2() {
|
|
36601
36644
|
};
|
|
@@ -48670,7 +48713,7 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
|
|
|
48670
48713
|
if (emitParams) editor.emit("commentsUpdate", emitParams);
|
|
48671
48714
|
return newTrackedChanges;
|
|
48672
48715
|
};
|
|
48673
|
-
const getTrackedChangeText = ({
|
|
48716
|
+
const getTrackedChangeText = ({ nodes, mark, trackedChangeType, isDeletionInsertion }) => {
|
|
48674
48717
|
let trackedChangeText = "";
|
|
48675
48718
|
let deletionText = "";
|
|
48676
48719
|
if (trackedChangeType === TrackInsertMarkName) {
|
|
@@ -48712,10 +48755,8 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
|
|
|
48712
48755
|
if (hasMatchingId) nodesWithMark.push(node2);
|
|
48713
48756
|
});
|
|
48714
48757
|
const { deletionText, trackedChangeText } = getTrackedChangeText({
|
|
48715
|
-
state: newEditorState,
|
|
48716
48758
|
nodes: nodesWithMark.length ? nodesWithMark : [node],
|
|
48717
48759
|
mark: trackedMark,
|
|
48718
|
-
marks,
|
|
48719
48760
|
trackedChangeType,
|
|
48720
48761
|
isDeletionInsertion
|
|
48721
48762
|
});
|
|
@@ -53370,228 +53411,1223 @@ const SlashMenu = Extension.create({
|
|
|
53370
53411
|
return this.editor.options.isHeadless ? [] : [slashMenuPlugin];
|
|
53371
53412
|
}
|
|
53372
53413
|
});
|
|
53373
|
-
|
|
53374
|
-
|
|
53375
|
-
|
|
53376
|
-
|
|
53377
|
-
|
|
53378
|
-
|
|
53379
|
-
|
|
53380
|
-
|
|
53381
|
-
|
|
53382
|
-
|
|
53383
|
-
|
|
53384
|
-
|
|
53385
|
-
|
|
53386
|
-
|
|
53387
|
-
|
|
53388
|
-
|
|
53389
|
-
|
|
53390
|
-
|
|
53391
|
-
|
|
53392
|
-
|
|
53393
|
-
|
|
53394
|
-
|
|
53395
|
-
|
|
53396
|
-
|
|
53397
|
-
|
|
53398
|
-
|
|
53399
|
-
|
|
53400
|
-
|
|
53401
|
-
|
|
53402
|
-
|
|
53403
|
-
|
|
53404
|
-
|
|
53405
|
-
|
|
53406
|
-
|
|
53407
|
-
|
|
53408
|
-
|
|
53409
|
-
|
|
53410
|
-
|
|
53411
|
-
|
|
53412
|
-
|
|
53413
|
-
|
|
53414
|
-
|
|
53415
|
-
|
|
53416
|
-
|
|
53417
|
-
|
|
53418
|
-
|
|
53419
|
-
|
|
53420
|
-
|
|
53421
|
-
|
|
53414
|
+
class StructuredContentViewBase {
|
|
53415
|
+
constructor(props) {
|
|
53416
|
+
__publicField$1(this, "node");
|
|
53417
|
+
__publicField$1(this, "view");
|
|
53418
|
+
__publicField$1(this, "getPos");
|
|
53419
|
+
__publicField$1(this, "decorations");
|
|
53420
|
+
__publicField$1(this, "innerDecorations");
|
|
53421
|
+
__publicField$1(this, "editor");
|
|
53422
|
+
__publicField$1(this, "extension");
|
|
53423
|
+
__publicField$1(this, "htmlAttributes");
|
|
53424
|
+
__publicField$1(this, "root");
|
|
53425
|
+
__publicField$1(this, "isDragging", false);
|
|
53426
|
+
this.node = props.node;
|
|
53427
|
+
this.view = props.editor.view;
|
|
53428
|
+
this.getPos = props.getPos;
|
|
53429
|
+
this.decorations = props.decorations;
|
|
53430
|
+
this.innerDecorations = props.innerDecorations;
|
|
53431
|
+
this.editor = props.editor;
|
|
53432
|
+
this.extension = props.extension;
|
|
53433
|
+
this.htmlAttributes = props.htmlAttributes;
|
|
53434
|
+
this.mount(props);
|
|
53435
|
+
}
|
|
53436
|
+
mount() {
|
|
53437
|
+
return;
|
|
53438
|
+
}
|
|
53439
|
+
get dom() {
|
|
53440
|
+
return this.root;
|
|
53441
|
+
}
|
|
53442
|
+
get contentDOM() {
|
|
53443
|
+
return null;
|
|
53444
|
+
}
|
|
53445
|
+
update(node, decorations, innerDecorations) {
|
|
53446
|
+
if (node.type !== this.node.type) {
|
|
53447
|
+
return false;
|
|
53448
|
+
}
|
|
53449
|
+
this.node = node;
|
|
53450
|
+
this.decorations = decorations;
|
|
53451
|
+
this.innerDecorations = innerDecorations;
|
|
53452
|
+
this.updateHTMLAttributes();
|
|
53453
|
+
return true;
|
|
53454
|
+
}
|
|
53455
|
+
stopEvent(event) {
|
|
53456
|
+
if (!this.dom) return false;
|
|
53457
|
+
const target = event.target;
|
|
53458
|
+
const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);
|
|
53459
|
+
if (!isInElement) return false;
|
|
53460
|
+
const isDragEvent = event.type.startsWith("drag");
|
|
53461
|
+
const isDropEvent = event.type === "drop";
|
|
53462
|
+
const isInput = ["INPUT", "BUTTON", "SELECT", "TEXTAREA"].includes(target.tagName) || target.isContentEditable;
|
|
53463
|
+
if (isInput && !isDropEvent && !isDragEvent) return true;
|
|
53464
|
+
const { isEditable } = this.editor;
|
|
53465
|
+
const { isDragging } = this;
|
|
53466
|
+
const isDraggable = !!this.node.type.spec.draggable;
|
|
53467
|
+
const isSelectable = NodeSelection.isSelectable(this.node);
|
|
53468
|
+
const isCopyEvent = event.type === "copy";
|
|
53469
|
+
const isPasteEvent = event.type === "paste";
|
|
53470
|
+
const isCutEvent = event.type === "cut";
|
|
53471
|
+
const isClickEvent = event.type === "mousedown";
|
|
53472
|
+
if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
|
|
53473
|
+
event.preventDefault();
|
|
53474
|
+
}
|
|
53475
|
+
if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
|
|
53476
|
+
event.preventDefault();
|
|
53477
|
+
return false;
|
|
53478
|
+
}
|
|
53479
|
+
if (isDraggable && isEditable && !isDragging && isClickEvent) {
|
|
53480
|
+
const dragHandle = target.closest("[data-drag-handle]");
|
|
53481
|
+
const isValidDragHandle = dragHandle && (this.dom === dragHandle || this.dom.contains(dragHandle));
|
|
53482
|
+
if (isValidDragHandle) {
|
|
53483
|
+
this.isDragging = true;
|
|
53484
|
+
document.addEventListener(
|
|
53485
|
+
"dragend",
|
|
53486
|
+
() => {
|
|
53487
|
+
this.isDragging = false;
|
|
53488
|
+
},
|
|
53489
|
+
{ once: true }
|
|
53490
|
+
);
|
|
53491
|
+
document.addEventListener(
|
|
53492
|
+
"drop",
|
|
53493
|
+
() => {
|
|
53494
|
+
this.isDragging = false;
|
|
53495
|
+
},
|
|
53496
|
+
{ once: true }
|
|
53497
|
+
);
|
|
53498
|
+
document.addEventListener(
|
|
53499
|
+
"mouseup",
|
|
53500
|
+
() => {
|
|
53501
|
+
this.isDragging = false;
|
|
53502
|
+
},
|
|
53503
|
+
{ once: true }
|
|
53504
|
+
);
|
|
53422
53505
|
}
|
|
53423
|
-
}
|
|
53506
|
+
}
|
|
53507
|
+
if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || isClickEvent && isSelectable) {
|
|
53508
|
+
return false;
|
|
53509
|
+
}
|
|
53510
|
+
return true;
|
|
53424
53511
|
}
|
|
53425
|
-
|
|
53426
|
-
|
|
53427
|
-
|
|
53428
|
-
|
|
53429
|
-
|
|
53430
|
-
|
|
53431
|
-
return
|
|
53512
|
+
ignoreMutation(mutation) {
|
|
53513
|
+
if (!this.dom || !this.contentDOM) return true;
|
|
53514
|
+
if (this.node.isLeaf || this.node.isAtom) return true;
|
|
53515
|
+
if (mutation.type === "selection") return false;
|
|
53516
|
+
if (this.contentDOM === mutation.target && mutation.type === "attributes") return true;
|
|
53517
|
+
if (this.contentDOM.contains(mutation.target)) return false;
|
|
53518
|
+
return true;
|
|
53432
53519
|
}
|
|
53433
|
-
|
|
53434
|
-
|
|
53435
|
-
|
|
53436
|
-
|
|
53437
|
-
|
|
53438
|
-
|
|
53439
|
-
|
|
53520
|
+
destroy() {
|
|
53521
|
+
this.dom.remove();
|
|
53522
|
+
this.contentDOM?.remove();
|
|
53523
|
+
}
|
|
53524
|
+
updateAttributes(attrs) {
|
|
53525
|
+
const pos = this.getPos();
|
|
53526
|
+
if (typeof pos !== "number") {
|
|
53527
|
+
return;
|
|
53528
|
+
}
|
|
53529
|
+
return this.view.dispatch(
|
|
53530
|
+
this.view.state.tr.setNodeMarkup(pos, void 0, {
|
|
53531
|
+
...this.node.attrs,
|
|
53532
|
+
...attrs
|
|
53533
|
+
})
|
|
53534
|
+
);
|
|
53535
|
+
}
|
|
53536
|
+
updateHTMLAttributes() {
|
|
53537
|
+
const { extensionService } = this.editor;
|
|
53538
|
+
const { attributes } = extensionService;
|
|
53539
|
+
const extensionAttrs = attributes.filter((i) => i.type === this.node.type.name);
|
|
53540
|
+
this.htmlAttributes = Attribute2.getAttributesToRender(this.node, extensionAttrs);
|
|
53541
|
+
}
|
|
53542
|
+
createDragHandle() {
|
|
53543
|
+
const dragHandle = document.createElement("span");
|
|
53544
|
+
dragHandle.classList.add("sd-structured-content-draggable");
|
|
53545
|
+
dragHandle.draggable = true;
|
|
53546
|
+
dragHandle.contentEditable = "false";
|
|
53547
|
+
dragHandle.dataset.dragHandle = "";
|
|
53548
|
+
const textElement = document.createElement("span");
|
|
53549
|
+
textElement.textContent = this.node.attrs.alias || "Structured content";
|
|
53550
|
+
dragHandle.append(textElement);
|
|
53551
|
+
return dragHandle;
|
|
53552
|
+
}
|
|
53553
|
+
onDragStart(event) {
|
|
53554
|
+
const { view } = this.editor;
|
|
53555
|
+
const target = event.target;
|
|
53556
|
+
const dragHandle = target.nodeType === 3 ? target.parentElement?.closest("[data-drag-handle]") : target.closest("[data-drag-handle]");
|
|
53557
|
+
if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
|
|
53558
|
+
return;
|
|
53559
|
+
}
|
|
53560
|
+
let x = 0;
|
|
53561
|
+
let y2 = 0;
|
|
53562
|
+
if (this.dom !== dragHandle) {
|
|
53563
|
+
const domBox = this.dom.getBoundingClientRect();
|
|
53564
|
+
const handleBox = dragHandle.getBoundingClientRect();
|
|
53565
|
+
const offsetX = event.offsetX ?? event.nativeEvent?.offsetX;
|
|
53566
|
+
const offsetY = event.offsetY ?? event.nativeEvent?.offsetY;
|
|
53567
|
+
x = handleBox.x - domBox.x + offsetX;
|
|
53568
|
+
y2 = handleBox.y - domBox.y + offsetY;
|
|
53569
|
+
}
|
|
53570
|
+
event.dataTransfer?.setDragImage(this.dom, x, y2);
|
|
53571
|
+
const pos = this.getPos();
|
|
53572
|
+
if (typeof pos !== "number") {
|
|
53573
|
+
return;
|
|
53574
|
+
}
|
|
53575
|
+
const selection = NodeSelection.create(view.state.doc, pos);
|
|
53576
|
+
const transaction = view.state.tr.setSelection(selection);
|
|
53440
53577
|
view.dispatch(transaction);
|
|
53441
|
-
});
|
|
53442
|
-
if (handled) {
|
|
53443
|
-
tr.setMeta("preventDispatch", true);
|
|
53444
53578
|
}
|
|
53445
|
-
|
|
53446
|
-
|
|
53447
|
-
|
|
53448
|
-
|
|
53449
|
-
|
|
53450
|
-
|
|
53579
|
+
}
|
|
53580
|
+
class StructuredContentInlineView extends StructuredContentViewBase {
|
|
53581
|
+
constructor(props) {
|
|
53582
|
+
super(props);
|
|
53583
|
+
}
|
|
53584
|
+
mount() {
|
|
53585
|
+
this.buildView();
|
|
53586
|
+
}
|
|
53587
|
+
get contentDOM() {
|
|
53588
|
+
const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
|
|
53589
|
+
return contentElement || null;
|
|
53590
|
+
}
|
|
53591
|
+
createElement() {
|
|
53592
|
+
const element = document.createElement("span");
|
|
53593
|
+
element.classList.add(structuredContentClass$1);
|
|
53594
|
+
element.setAttribute("data-structured-content", "");
|
|
53595
|
+
const contentElement = document.createElement("span");
|
|
53596
|
+
contentElement.classList.add(structuredContentInnerClass$1);
|
|
53597
|
+
element.append(contentElement);
|
|
53598
|
+
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
53599
|
+
updateDOMAttributes(element, { ...domAttrs });
|
|
53600
|
+
return { element, contentElement };
|
|
53601
|
+
}
|
|
53602
|
+
buildView() {
|
|
53603
|
+
const { element } = this.createElement();
|
|
53604
|
+
const dragHandle = this.createDragHandle();
|
|
53605
|
+
element.prepend(dragHandle);
|
|
53606
|
+
element.addEventListener("dragstart", (e) => this.onDragStart(e));
|
|
53607
|
+
this.root = element;
|
|
53608
|
+
}
|
|
53609
|
+
updateView() {
|
|
53610
|
+
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
53611
|
+
updateDOMAttributes(this.dom, { ...domAttrs });
|
|
53612
|
+
}
|
|
53613
|
+
update(node, decorations, innerDecorations) {
|
|
53614
|
+
const result = super.update(node, decorations, innerDecorations);
|
|
53615
|
+
if (!result) return false;
|
|
53616
|
+
this.updateView();
|
|
53617
|
+
return true;
|
|
53618
|
+
}
|
|
53619
|
+
}
|
|
53620
|
+
const structuredContentClass$1 = "sd-structured-content";
|
|
53621
|
+
const structuredContentInnerClass$1 = "sd-structured-content__content";
|
|
53622
|
+
const StructuredContent = Node$1.create({
|
|
53623
|
+
name: "structuredContent",
|
|
53624
|
+
group: "inline structuredContent",
|
|
53451
53625
|
inline: true,
|
|
53452
53626
|
content: "inline*",
|
|
53453
|
-
|
|
53454
|
-
|
|
53627
|
+
isolating: true,
|
|
53628
|
+
atom: false,
|
|
53629
|
+
// false - has editable content.
|
|
53630
|
+
draggable: true,
|
|
53455
53631
|
addOptions() {
|
|
53456
53632
|
return {
|
|
53457
53633
|
htmlAttributes: {
|
|
53458
|
-
|
|
53634
|
+
class: structuredContentClass$1,
|
|
53635
|
+
"aria-label": "Structured content node"
|
|
53459
53636
|
}
|
|
53460
53637
|
};
|
|
53461
53638
|
},
|
|
53462
53639
|
addAttributes() {
|
|
53463
53640
|
return {
|
|
53464
|
-
|
|
53641
|
+
id: {
|
|
53465
53642
|
default: null,
|
|
53466
|
-
|
|
53467
|
-
|
|
53643
|
+
parseDOM: (elem) => elem.getAttribute("data-id"),
|
|
53644
|
+
renderDOM: (attrs) => {
|
|
53645
|
+
if (!attrs.id) return {};
|
|
53646
|
+
return { "data-id": attrs.id };
|
|
53647
|
+
}
|
|
53468
53648
|
},
|
|
53469
|
-
|
|
53649
|
+
tag: {
|
|
53470
53650
|
default: null,
|
|
53471
|
-
|
|
53472
|
-
|
|
53651
|
+
parseDOM: (elem) => elem.getAttribute("data-tag"),
|
|
53652
|
+
renderDOM: (attrs) => {
|
|
53653
|
+
if (!attrs.tag) return {};
|
|
53654
|
+
return { "data-tag": attrs.tag };
|
|
53655
|
+
}
|
|
53473
53656
|
},
|
|
53474
|
-
|
|
53657
|
+
alias: {
|
|
53475
53658
|
default: null,
|
|
53476
|
-
|
|
53477
|
-
|
|
53659
|
+
parseDOM: (elem) => elem.getAttribute("data-alias"),
|
|
53660
|
+
renderDOM: (attrs) => {
|
|
53661
|
+
if (!attrs.alias) return {};
|
|
53662
|
+
return { "data-alias": attrs.alias };
|
|
53663
|
+
}
|
|
53478
53664
|
},
|
|
53479
|
-
|
|
53480
|
-
|
|
53481
|
-
rendered: false,
|
|
53482
|
-
keepOnSplit: true
|
|
53665
|
+
sdtPr: {
|
|
53666
|
+
rendered: false
|
|
53483
53667
|
}
|
|
53484
53668
|
};
|
|
53485
53669
|
},
|
|
53486
|
-
addCommands() {
|
|
53487
|
-
return {
|
|
53488
|
-
splitRun
|
|
53489
|
-
};
|
|
53490
|
-
},
|
|
53491
53670
|
parseDOM() {
|
|
53492
|
-
return [{ tag: "span[data-
|
|
53671
|
+
return [{ tag: "span[data-structured-content]" }];
|
|
53493
53672
|
},
|
|
53494
53673
|
renderDOM({ htmlAttributes }) {
|
|
53495
|
-
|
|
53496
|
-
|
|
53674
|
+
return [
|
|
53675
|
+
"span",
|
|
53676
|
+
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
|
|
53677
|
+
"data-structured-content": ""
|
|
53678
|
+
}),
|
|
53679
|
+
0
|
|
53680
|
+
];
|
|
53681
|
+
},
|
|
53682
|
+
addNodeView() {
|
|
53683
|
+
return (props) => {
|
|
53684
|
+
return new StructuredContentInlineView({ ...props });
|
|
53685
|
+
};
|
|
53497
53686
|
}
|
|
53498
53687
|
});
|
|
53499
|
-
|
|
53500
|
-
|
|
53501
|
-
|
|
53502
|
-
|
|
53503
|
-
|
|
53504
|
-
|
|
53505
|
-
|
|
53506
|
-
|
|
53688
|
+
class StructuredContentBlockView extends StructuredContentViewBase {
|
|
53689
|
+
constructor(props) {
|
|
53690
|
+
super(props);
|
|
53691
|
+
}
|
|
53692
|
+
mount() {
|
|
53693
|
+
this.buildView();
|
|
53694
|
+
}
|
|
53695
|
+
get contentDOM() {
|
|
53696
|
+
const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
|
|
53697
|
+
return contentElement || null;
|
|
53698
|
+
}
|
|
53699
|
+
createElement() {
|
|
53700
|
+
const element = document.createElement("div");
|
|
53701
|
+
element.classList.add(structuredContentClass);
|
|
53702
|
+
element.setAttribute("data-structured-content-block", "");
|
|
53703
|
+
const contentElement = document.createElement("div");
|
|
53704
|
+
contentElement.classList.add(structuredContentInnerClass);
|
|
53705
|
+
element.append(contentElement);
|
|
53706
|
+
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
53707
|
+
updateDOMAttributes(element, { ...domAttrs });
|
|
53708
|
+
return { element, contentElement };
|
|
53709
|
+
}
|
|
53710
|
+
buildView() {
|
|
53711
|
+
const { element } = this.createElement();
|
|
53712
|
+
const dragHandle = this.createDragHandle();
|
|
53713
|
+
element.prepend(dragHandle);
|
|
53714
|
+
element.addEventListener("dragstart", (e) => this.onDragStart(e));
|
|
53715
|
+
this.root = element;
|
|
53716
|
+
}
|
|
53717
|
+
updateView() {
|
|
53718
|
+
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
53719
|
+
updateDOMAttributes(this.dom, { ...domAttrs });
|
|
53720
|
+
}
|
|
53721
|
+
update(node, decorations, innerDecorations) {
|
|
53722
|
+
const result = super.update(node, decorations, innerDecorations);
|
|
53723
|
+
if (!result) return false;
|
|
53724
|
+
this.updateView();
|
|
53725
|
+
return true;
|
|
53726
|
+
}
|
|
53727
|
+
}
|
|
53728
|
+
const structuredContentClass = "sd-structured-content-block";
|
|
53729
|
+
const structuredContentInnerClass = "sd-structured-content-block__content";
|
|
53730
|
+
const StructuredContentBlock = Node$1.create({
|
|
53731
|
+
name: "structuredContentBlock",
|
|
53732
|
+
group: "block structuredContent",
|
|
53733
|
+
content: "block*",
|
|
53734
|
+
isolating: true,
|
|
53735
|
+
atom: false,
|
|
53736
|
+
// false - has editable content.
|
|
53737
|
+
draggable: true,
|
|
53507
53738
|
addOptions() {
|
|
53508
53739
|
return {
|
|
53509
|
-
itemTypeName: "listItem",
|
|
53510
53740
|
htmlAttributes: {
|
|
53511
|
-
|
|
53512
|
-
|
|
53513
|
-
|
|
53514
|
-
keepAttributes: false
|
|
53741
|
+
class: structuredContentClass,
|
|
53742
|
+
"aria-label": "Structured content block node"
|
|
53743
|
+
}
|
|
53515
53744
|
};
|
|
53516
53745
|
},
|
|
53517
|
-
parseDOM() {
|
|
53518
|
-
return [{ tag: "ul" }];
|
|
53519
|
-
},
|
|
53520
|
-
renderDOM({ htmlAttributes }) {
|
|
53521
|
-
const attributes = Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
|
|
53522
|
-
return ["ul", attributes, 0];
|
|
53523
|
-
},
|
|
53524
53746
|
addAttributes() {
|
|
53525
53747
|
return {
|
|
53526
|
-
|
|
53527
|
-
default:
|
|
53528
|
-
|
|
53748
|
+
id: {
|
|
53749
|
+
default: null,
|
|
53750
|
+
parseDOM: (elem) => elem.getAttribute("data-id"),
|
|
53751
|
+
renderDOM: (attrs) => {
|
|
53752
|
+
if (!attrs.id) return {};
|
|
53753
|
+
return { "data-id": attrs.id };
|
|
53754
|
+
}
|
|
53529
53755
|
},
|
|
53530
|
-
|
|
53531
|
-
|
|
53756
|
+
tag: {
|
|
53757
|
+
default: null,
|
|
53758
|
+
parseDOM: (elem) => elem.getAttribute("data-tag"),
|
|
53759
|
+
renderDOM: (attrs) => {
|
|
53760
|
+
if (!attrs.tag) return {};
|
|
53761
|
+
return { "data-tag": attrs.tag };
|
|
53762
|
+
}
|
|
53532
53763
|
},
|
|
53533
|
-
|
|
53764
|
+
alias: {
|
|
53534
53765
|
default: null,
|
|
53535
|
-
|
|
53536
|
-
parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
|
|
53766
|
+
parseDOM: (elem) => elem.getAttribute("data-alias"),
|
|
53537
53767
|
renderDOM: (attrs) => {
|
|
53538
|
-
|
|
53768
|
+
if (!attrs.alias) return {};
|
|
53769
|
+
return { "data-alias": attrs.alias };
|
|
53539
53770
|
}
|
|
53540
53771
|
},
|
|
53541
|
-
|
|
53542
|
-
rendered: false
|
|
53543
|
-
keepOnSplit: true
|
|
53544
|
-
}
|
|
53545
|
-
};
|
|
53546
|
-
},
|
|
53547
|
-
addCommands() {
|
|
53548
|
-
return {
|
|
53549
|
-
/**
|
|
53550
|
-
* Toggle a bullet list at the current selection
|
|
53551
|
-
* @category Command
|
|
53552
|
-
* @example
|
|
53553
|
-
* // Toggle bullet list on selected text
|
|
53554
|
-
* editor.commands.toggleBulletList()
|
|
53555
|
-
* @note Converts selected paragraphs to list items or removes list formatting
|
|
53556
|
-
*/
|
|
53557
|
-
toggleBulletList: () => (params2) => {
|
|
53558
|
-
return toggleList(this.type)(params2);
|
|
53772
|
+
sdtPr: {
|
|
53773
|
+
rendered: false
|
|
53559
53774
|
}
|
|
53560
53775
|
};
|
|
53561
53776
|
},
|
|
53562
|
-
|
|
53563
|
-
return {
|
|
53564
|
-
"Mod-Shift-8": () => {
|
|
53565
|
-
return this.editor.commands.toggleBulletList();
|
|
53566
|
-
}
|
|
53567
|
-
};
|
|
53777
|
+
parseDOM() {
|
|
53778
|
+
return [{ tag: "div[data-structured-content-block]" }];
|
|
53568
53779
|
},
|
|
53569
|
-
|
|
53780
|
+
renderDOM({ htmlAttributes }) {
|
|
53570
53781
|
return [
|
|
53571
|
-
|
|
53572
|
-
|
|
53573
|
-
|
|
53574
|
-
|
|
53575
|
-
|
|
53576
|
-
for (let depth = $pos.depth; depth >= 0; depth--) {
|
|
53577
|
-
if ($pos.node(depth).type === listItemType) {
|
|
53578
|
-
return null;
|
|
53579
|
-
}
|
|
53580
|
-
}
|
|
53581
|
-
const { tr } = state2;
|
|
53582
|
-
tr.delete(range2.from, range2.to);
|
|
53583
|
-
ListHelpers.createNewList({
|
|
53584
|
-
listType: this.type,
|
|
53585
|
-
tr,
|
|
53586
|
-
editor: this.editor
|
|
53587
|
-
});
|
|
53588
|
-
}
|
|
53589
|
-
})
|
|
53782
|
+
"div",
|
|
53783
|
+
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
|
|
53784
|
+
"data-structured-content-block": ""
|
|
53785
|
+
}),
|
|
53786
|
+
0
|
|
53590
53787
|
];
|
|
53788
|
+
},
|
|
53789
|
+
addNodeView() {
|
|
53790
|
+
return (props) => {
|
|
53791
|
+
return new StructuredContentBlockView({ ...props });
|
|
53792
|
+
};
|
|
53591
53793
|
}
|
|
53592
53794
|
});
|
|
53593
|
-
|
|
53594
|
-
const
|
|
53795
|
+
function getStructuredContentTagsById(idOrIds, state2) {
|
|
53796
|
+
const result = findChildren$5(state2.doc, (node) => {
|
|
53797
|
+
const isStructuredContent = ["structuredContent", "structuredContentBlock"].includes(node.type.name);
|
|
53798
|
+
if (Array.isArray(idOrIds)) {
|
|
53799
|
+
return isStructuredContent && idOrIds.includes(node.attrs.id);
|
|
53800
|
+
} else {
|
|
53801
|
+
return isStructuredContent && node.attrs.id === idOrIds;
|
|
53802
|
+
}
|
|
53803
|
+
});
|
|
53804
|
+
return result;
|
|
53805
|
+
}
|
|
53806
|
+
function getStructuredContentTags(state2) {
|
|
53807
|
+
const result = findChildren$5(state2.doc, (node) => {
|
|
53808
|
+
return node.type.name === "structuredContent" || node.type.name === "structuredContentBlock";
|
|
53809
|
+
});
|
|
53810
|
+
return result;
|
|
53811
|
+
}
|
|
53812
|
+
function getStructuredContentInlineTags(state2) {
|
|
53813
|
+
const result = findChildren$5(state2.doc, (node) => node.type.name === "structuredContent");
|
|
53814
|
+
return result;
|
|
53815
|
+
}
|
|
53816
|
+
function getStructuredContentBlockTags(state2) {
|
|
53817
|
+
const result = findChildren$5(state2.doc, (node) => node.type.name === "structuredContentBlock");
|
|
53818
|
+
return result;
|
|
53819
|
+
}
|
|
53820
|
+
const structuredContentHelpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
53821
|
+
__proto__: null,
|
|
53822
|
+
getStructuredContentBlockTags,
|
|
53823
|
+
getStructuredContentInlineTags,
|
|
53824
|
+
getStructuredContentTags,
|
|
53825
|
+
getStructuredContentTagsById
|
|
53826
|
+
}, Symbol.toStringTag, { value: "Module" }));
|
|
53827
|
+
const STRUCTURED_CONTENT_NAMES = ["structuredContent", "structuredContentBlock"];
|
|
53828
|
+
const StructuredContentCommands = Extension.create({
|
|
53829
|
+
name: "structuredContentCommands",
|
|
53830
|
+
addCommands() {
|
|
53831
|
+
return {
|
|
53832
|
+
/**
|
|
53833
|
+
* Inserts a structured content inline at selection.
|
|
53834
|
+
* @category Command
|
|
53835
|
+
* @param {StructuredContentInlineInsert} options
|
|
53836
|
+
*/
|
|
53837
|
+
insertStructuredContentInline: (options = {}) => ({ editor, dispatch, state: state2, tr }) => {
|
|
53838
|
+
const { schema } = editor;
|
|
53839
|
+
let { from: from2, to } = state2.selection;
|
|
53840
|
+
if (dispatch) {
|
|
53841
|
+
const selectionText = state2.doc.textBetween(from2, to);
|
|
53842
|
+
let content = null;
|
|
53843
|
+
if (selectionText) {
|
|
53844
|
+
content = schema.text(selectionText);
|
|
53845
|
+
}
|
|
53846
|
+
if (options.text) {
|
|
53847
|
+
content = schema.text(options.text);
|
|
53848
|
+
}
|
|
53849
|
+
if (options.json) {
|
|
53850
|
+
content = schema.nodeFromJSON(options.json);
|
|
53851
|
+
}
|
|
53852
|
+
if (!content) {
|
|
53853
|
+
content = schema.text(" ");
|
|
53854
|
+
}
|
|
53855
|
+
const attrs = {
|
|
53856
|
+
...options.attrs,
|
|
53857
|
+
id: options.attrs?.id || generateRandomSigned32BitIntStrId(),
|
|
53858
|
+
tag: "inline_text_sdt",
|
|
53859
|
+
alias: options.attrs?.alias || "Structured content"
|
|
53860
|
+
};
|
|
53861
|
+
const node = schema.nodes.structuredContent.create(attrs, content, null);
|
|
53862
|
+
const parent = findParentNode((node2) => node2.type.name === "structuredContent")(state2.selection);
|
|
53863
|
+
if (parent) {
|
|
53864
|
+
const insertPos = parent.pos + parent.node.nodeSize;
|
|
53865
|
+
from2 = to = insertPos;
|
|
53866
|
+
}
|
|
53867
|
+
tr.replaceWith(from2, to, node);
|
|
53868
|
+
}
|
|
53869
|
+
return true;
|
|
53870
|
+
},
|
|
53871
|
+
/**
|
|
53872
|
+
* Inserts a structured content block at selection.
|
|
53873
|
+
* @category Command
|
|
53874
|
+
* @param {StructuredContentBlockInsert} options
|
|
53875
|
+
*/
|
|
53876
|
+
insertStructuredContentBlock: (options = {}) => ({ editor, dispatch, state: state2, tr }) => {
|
|
53877
|
+
const { schema } = editor;
|
|
53878
|
+
let { from: from2, to } = state2.selection;
|
|
53879
|
+
if (dispatch) {
|
|
53880
|
+
const selectionContent = state2.selection.content();
|
|
53881
|
+
let content = null;
|
|
53882
|
+
if (selectionContent.size) {
|
|
53883
|
+
content = selectionContent.content;
|
|
53884
|
+
}
|
|
53885
|
+
if (options.html) {
|
|
53886
|
+
const html = htmlHandler(options.html, editor);
|
|
53887
|
+
const doc2 = DOMParser$1.fromSchema(schema).parse(html);
|
|
53888
|
+
content = doc2.content;
|
|
53889
|
+
}
|
|
53890
|
+
if (options.json) {
|
|
53891
|
+
content = schema.nodeFromJSON(options.json);
|
|
53892
|
+
}
|
|
53893
|
+
if (!content) {
|
|
53894
|
+
content = schema.nodeFromJSON({ type: "paragraph", content: [] });
|
|
53895
|
+
}
|
|
53896
|
+
const attrs = {
|
|
53897
|
+
...options.attrs,
|
|
53898
|
+
id: options.attrs?.id || generateRandomSigned32BitIntStrId(),
|
|
53899
|
+
tag: "block_table_sdt",
|
|
53900
|
+
alias: options.attrs?.alias || "Structured content"
|
|
53901
|
+
};
|
|
53902
|
+
const node = schema.nodes.structuredContentBlock.create(attrs, content, null);
|
|
53903
|
+
const parent = findParentNode((node2) => node2.type.name === "structuredContentBlock")(state2.selection);
|
|
53904
|
+
if (parent) {
|
|
53905
|
+
const insertPos = parent.pos + parent.node.nodeSize;
|
|
53906
|
+
from2 = to = insertPos;
|
|
53907
|
+
}
|
|
53908
|
+
tr.replaceRangeWith(from2, to, node);
|
|
53909
|
+
}
|
|
53910
|
+
return true;
|
|
53911
|
+
},
|
|
53912
|
+
/**
|
|
53913
|
+
* Updates a structured content attributes or content.
|
|
53914
|
+
* If the updated node does not match the schema, it will not be updated.
|
|
53915
|
+
* @category Command
|
|
53916
|
+
* @param {string} id
|
|
53917
|
+
* @param {StructuredContentUpdate} options
|
|
53918
|
+
*/
|
|
53919
|
+
updateStructuredContentById: (id, options = {}) => ({ editor, dispatch, state: state2, tr }) => {
|
|
53920
|
+
const structuredContentTags = getStructuredContentTagsById(id, state2);
|
|
53921
|
+
if (!structuredContentTags.length) {
|
|
53922
|
+
return true;
|
|
53923
|
+
}
|
|
53924
|
+
const { schema } = editor;
|
|
53925
|
+
if (dispatch) {
|
|
53926
|
+
const structuredContent = structuredContentTags[0];
|
|
53927
|
+
const { pos, node } = structuredContent;
|
|
53928
|
+
const posFrom = pos;
|
|
53929
|
+
const posTo = pos + node.nodeSize;
|
|
53930
|
+
let content = null;
|
|
53931
|
+
if (options.text) {
|
|
53932
|
+
content = schema.text(options.text);
|
|
53933
|
+
}
|
|
53934
|
+
if (options.html) {
|
|
53935
|
+
const html = htmlHandler(options.html, editor);
|
|
53936
|
+
const doc2 = DOMParser$1.fromSchema(schema).parse(html);
|
|
53937
|
+
content = doc2.content;
|
|
53938
|
+
}
|
|
53939
|
+
if (options.json) {
|
|
53940
|
+
content = schema.nodeFromJSON(options.json);
|
|
53941
|
+
}
|
|
53942
|
+
if (!content) {
|
|
53943
|
+
content = node.content;
|
|
53944
|
+
}
|
|
53945
|
+
const updatedNode = node.type.create({ ...node.attrs, ...options.attrs }, content, node.marks);
|
|
53946
|
+
try {
|
|
53947
|
+
updatedNode.check();
|
|
53948
|
+
} catch {
|
|
53949
|
+
console.error("Updated node does not conform to the schema");
|
|
53950
|
+
return false;
|
|
53951
|
+
}
|
|
53952
|
+
tr.replaceWith(posFrom, posTo, updatedNode);
|
|
53953
|
+
}
|
|
53954
|
+
return true;
|
|
53955
|
+
},
|
|
53956
|
+
/**
|
|
53957
|
+
* Removes a structured content.
|
|
53958
|
+
* @category Command
|
|
53959
|
+
* @param {Array<{ node: Node, pos: number }>} structuredContentTags
|
|
53960
|
+
*/
|
|
53961
|
+
deleteStructuredContent: (structuredContentTags) => ({ dispatch, tr }) => {
|
|
53962
|
+
if (!structuredContentTags.length) {
|
|
53963
|
+
return true;
|
|
53964
|
+
}
|
|
53965
|
+
if (dispatch) {
|
|
53966
|
+
structuredContentTags.forEach((structuredContent) => {
|
|
53967
|
+
const { pos, node } = structuredContent;
|
|
53968
|
+
const posFrom = tr.mapping.map(pos);
|
|
53969
|
+
const posTo = tr.mapping.map(pos + node.nodeSize);
|
|
53970
|
+
const currentNode = tr.doc.nodeAt(posFrom);
|
|
53971
|
+
if (currentNode && node.eq(currentNode)) {
|
|
53972
|
+
tr.delete(posFrom, posTo);
|
|
53973
|
+
}
|
|
53974
|
+
});
|
|
53975
|
+
}
|
|
53976
|
+
return true;
|
|
53977
|
+
},
|
|
53978
|
+
/**
|
|
53979
|
+
* Removes a structured content by ID.
|
|
53980
|
+
* @category Command
|
|
53981
|
+
* @param {string | string[]} idOrIds
|
|
53982
|
+
*/
|
|
53983
|
+
deleteStructuredContentById: (idOrIds) => ({ dispatch, state: state2, tr }) => {
|
|
53984
|
+
const structuredContentTags = getStructuredContentTagsById(idOrIds, state2);
|
|
53985
|
+
if (!structuredContentTags.length) {
|
|
53986
|
+
return true;
|
|
53987
|
+
}
|
|
53988
|
+
if (dispatch) {
|
|
53989
|
+
structuredContentTags.forEach((structuredContent) => {
|
|
53990
|
+
const { pos, node } = structuredContent;
|
|
53991
|
+
const posFrom = tr.mapping.map(pos);
|
|
53992
|
+
const posTo = tr.mapping.map(pos + node.nodeSize);
|
|
53993
|
+
const currentNode = tr.doc.nodeAt(posFrom);
|
|
53994
|
+
if (currentNode && node.eq(currentNode)) {
|
|
53995
|
+
tr.delete(posFrom, posTo);
|
|
53996
|
+
}
|
|
53997
|
+
});
|
|
53998
|
+
}
|
|
53999
|
+
return true;
|
|
54000
|
+
},
|
|
54001
|
+
/**
|
|
54002
|
+
* Removes a structured content at cursor, preserving its content.
|
|
54003
|
+
* @category Command
|
|
54004
|
+
*/
|
|
54005
|
+
deleteStructuredContentAtSelection: () => ({ dispatch, state: state2, tr }) => {
|
|
54006
|
+
const predicate = (node) => STRUCTURED_CONTENT_NAMES.includes(node.type.name);
|
|
54007
|
+
const structuredContent = findParentNode(predicate)(state2.selection);
|
|
54008
|
+
if (!structuredContent) {
|
|
54009
|
+
return true;
|
|
54010
|
+
}
|
|
54011
|
+
if (dispatch) {
|
|
54012
|
+
const { node, pos } = structuredContent;
|
|
54013
|
+
const posFrom = pos;
|
|
54014
|
+
const posTo = posFrom + node.nodeSize;
|
|
54015
|
+
const content = node.content;
|
|
54016
|
+
tr.replaceWith(posFrom, posTo, content);
|
|
54017
|
+
}
|
|
54018
|
+
return true;
|
|
54019
|
+
}
|
|
54020
|
+
};
|
|
54021
|
+
},
|
|
54022
|
+
addHelpers() {
|
|
54023
|
+
return {
|
|
54024
|
+
...structuredContentHelpers
|
|
54025
|
+
};
|
|
54026
|
+
}
|
|
54027
|
+
});
|
|
54028
|
+
class DocumentSectionView {
|
|
54029
|
+
constructor(node, getPos, decorations, editor) {
|
|
54030
|
+
__privateAdd$1(this, _DocumentSectionView_instances);
|
|
54031
|
+
this.node = node;
|
|
54032
|
+
this.editor = editor;
|
|
54033
|
+
this.decorations = decorations;
|
|
54034
|
+
this.view = editor.view;
|
|
54035
|
+
this.getPos = getPos;
|
|
54036
|
+
__privateMethod$1(this, _DocumentSectionView_instances, init_fn2).call(this);
|
|
54037
|
+
}
|
|
54038
|
+
}
|
|
54039
|
+
_DocumentSectionView_instances = /* @__PURE__ */ new WeakSet();
|
|
54040
|
+
init_fn2 = function() {
|
|
54041
|
+
const { attrs } = this.node;
|
|
54042
|
+
const { id, title, description } = attrs;
|
|
54043
|
+
this.dom = document.createElement("div");
|
|
54044
|
+
this.dom.className = "sd-document-section-block";
|
|
54045
|
+
this.dom.setAttribute("data-id", id);
|
|
54046
|
+
this.dom.setAttribute("data-title", title);
|
|
54047
|
+
this.dom.setAttribute("data-description", description);
|
|
54048
|
+
this.dom.setAttribute("aria-label", "Document section");
|
|
54049
|
+
__privateMethod$1(this, _DocumentSectionView_instances, addToolTip_fn).call(this);
|
|
54050
|
+
this.contentDOM = document.createElement("div");
|
|
54051
|
+
this.contentDOM.className = "sd-document-section-block-content";
|
|
54052
|
+
this.contentDOM.setAttribute("contenteditable", "true");
|
|
54053
|
+
this.dom.appendChild(this.contentDOM);
|
|
54054
|
+
};
|
|
54055
|
+
addToolTip_fn = function() {
|
|
54056
|
+
const { title } = this.node.attrs;
|
|
54057
|
+
this.infoDiv = document.createElement("div");
|
|
54058
|
+
this.infoDiv.className = "sd-document-section-block-info";
|
|
54059
|
+
const textSpan = document.createElement("span");
|
|
54060
|
+
textSpan.textContent = title || "Document section";
|
|
54061
|
+
this.infoDiv.appendChild(textSpan);
|
|
54062
|
+
this.infoDiv.setAttribute("contenteditable", "false");
|
|
54063
|
+
this.dom.appendChild(this.infoDiv);
|
|
54064
|
+
};
|
|
54065
|
+
const getAllSections = (editor) => {
|
|
54066
|
+
if (!editor) return [];
|
|
54067
|
+
const type2 = editor.schema.nodes.documentSection;
|
|
54068
|
+
if (!type2) return [];
|
|
54069
|
+
const sections = [];
|
|
54070
|
+
const { state: state2 } = editor;
|
|
54071
|
+
state2.doc.descendants((node, pos) => {
|
|
54072
|
+
if (node.type.name === type2.name) {
|
|
54073
|
+
sections.push({ node, pos });
|
|
54074
|
+
}
|
|
54075
|
+
});
|
|
54076
|
+
return sections;
|
|
54077
|
+
};
|
|
54078
|
+
const exportSectionsToHTML = (editor) => {
|
|
54079
|
+
const sections = getAllSections(editor);
|
|
54080
|
+
const processedSections = /* @__PURE__ */ new Set();
|
|
54081
|
+
const result = [];
|
|
54082
|
+
sections.forEach(({ node }) => {
|
|
54083
|
+
const { attrs } = node;
|
|
54084
|
+
const { id, title, description } = attrs;
|
|
54085
|
+
if (processedSections.has(id)) return;
|
|
54086
|
+
processedSections.add(id);
|
|
54087
|
+
const html = getHTMLFromNode(node, editor);
|
|
54088
|
+
result.push({
|
|
54089
|
+
id,
|
|
54090
|
+
title,
|
|
54091
|
+
description,
|
|
54092
|
+
html
|
|
54093
|
+
});
|
|
54094
|
+
});
|
|
54095
|
+
return result;
|
|
54096
|
+
};
|
|
54097
|
+
const getHTMLFromNode = (node, editor) => {
|
|
54098
|
+
const tempDocument = document.implementation.createHTMLDocument();
|
|
54099
|
+
const container = tempDocument.createElement("div");
|
|
54100
|
+
const fragment = DOMSerializer.fromSchema(editor.schema).serializeFragment(node.content);
|
|
54101
|
+
container.appendChild(fragment);
|
|
54102
|
+
let html = container.innerHTML;
|
|
54103
|
+
return html;
|
|
54104
|
+
};
|
|
54105
|
+
const exportSectionsToJSON = (editor) => {
|
|
54106
|
+
const sections = getAllSections(editor);
|
|
54107
|
+
const processedSections = /* @__PURE__ */ new Set();
|
|
54108
|
+
const result = [];
|
|
54109
|
+
sections.forEach(({ node }) => {
|
|
54110
|
+
const { attrs } = node;
|
|
54111
|
+
const { id, title, description } = attrs;
|
|
54112
|
+
if (processedSections.has(id)) return;
|
|
54113
|
+
processedSections.add(id);
|
|
54114
|
+
result.push({
|
|
54115
|
+
id,
|
|
54116
|
+
title,
|
|
54117
|
+
description,
|
|
54118
|
+
content: node.toJSON()
|
|
54119
|
+
});
|
|
54120
|
+
});
|
|
54121
|
+
return result;
|
|
54122
|
+
};
|
|
54123
|
+
const getLinkedSectionEditor = (id, options, editor) => {
|
|
54124
|
+
const sections = getAllSections(editor);
|
|
54125
|
+
const section = sections.find((s) => s.node.attrs.id === id);
|
|
54126
|
+
if (!section) return null;
|
|
54127
|
+
const child = editor.createChildEditor({
|
|
54128
|
+
...options,
|
|
54129
|
+
onUpdate: ({ editor: childEditor, transaction }) => {
|
|
54130
|
+
const isFromtLinkedParent = transaction.getMeta("fromLinkedParent");
|
|
54131
|
+
if (isFromtLinkedParent) return;
|
|
54132
|
+
const updatedContent = childEditor.state.doc.content;
|
|
54133
|
+
const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
|
|
54134
|
+
if (!sectionNode) return;
|
|
54135
|
+
const { pos, node } = sectionNode;
|
|
54136
|
+
const newNode = node.type.create(node.attrs, updatedContent, node.marks);
|
|
54137
|
+
const tr = editor.state.tr.replaceWith(pos, pos + node.nodeSize, newNode);
|
|
54138
|
+
tr.setMeta("fromLinkedChild", true);
|
|
54139
|
+
editor.view.dispatch(tr);
|
|
54140
|
+
}
|
|
54141
|
+
});
|
|
54142
|
+
editor.on("update", ({ transaction }) => {
|
|
54143
|
+
const isFromLinkedChild = transaction.getMeta("fromLinkedChild");
|
|
54144
|
+
if (isFromLinkedChild) return;
|
|
54145
|
+
const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
|
|
54146
|
+
if (!sectionNode) return;
|
|
54147
|
+
const sectionContent = sectionNode.node.content;
|
|
54148
|
+
const json = {
|
|
54149
|
+
type: "doc",
|
|
54150
|
+
content: sectionContent.content.map((node) => node.toJSON())
|
|
54151
|
+
};
|
|
54152
|
+
const childTr = child.state.tr;
|
|
54153
|
+
childTr.setMeta("fromLinkedParent", true);
|
|
54154
|
+
childTr.replaceWith(0, child.state.doc.content.size, child.schema.nodeFromJSON(json));
|
|
54155
|
+
child.view.dispatch(childTr);
|
|
54156
|
+
});
|
|
54157
|
+
return child;
|
|
54158
|
+
};
|
|
54159
|
+
const SectionHelpers = {
|
|
54160
|
+
getAllSections,
|
|
54161
|
+
exportSectionsToHTML,
|
|
54162
|
+
exportSectionsToJSON,
|
|
54163
|
+
getLinkedSectionEditor
|
|
54164
|
+
};
|
|
54165
|
+
const DocumentSection = Node$1.create({
|
|
54166
|
+
name: "documentSection",
|
|
54167
|
+
group: "block",
|
|
54168
|
+
content: "block*",
|
|
54169
|
+
atom: true,
|
|
54170
|
+
isolating: true,
|
|
54171
|
+
addOptions() {
|
|
54172
|
+
return {
|
|
54173
|
+
htmlAttributes: {
|
|
54174
|
+
class: "sd-document-section-block",
|
|
54175
|
+
"aria-label": "Structured content block"
|
|
54176
|
+
}
|
|
54177
|
+
};
|
|
54178
|
+
},
|
|
54179
|
+
parseDOM() {
|
|
54180
|
+
return [
|
|
54181
|
+
{
|
|
54182
|
+
tag: "div.sd-document-section-block",
|
|
54183
|
+
priority: 60
|
|
54184
|
+
}
|
|
54185
|
+
];
|
|
54186
|
+
},
|
|
54187
|
+
renderDOM({ htmlAttributes }) {
|
|
54188
|
+
return ["div", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
|
|
54189
|
+
},
|
|
54190
|
+
addAttributes() {
|
|
54191
|
+
return {
|
|
54192
|
+
id: {},
|
|
54193
|
+
sdBlockId: {
|
|
54194
|
+
default: null,
|
|
54195
|
+
keepOnSplit: false,
|
|
54196
|
+
parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
|
|
54197
|
+
renderDOM: (attrs) => {
|
|
54198
|
+
return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
|
|
54199
|
+
}
|
|
54200
|
+
},
|
|
54201
|
+
title: {},
|
|
54202
|
+
description: {},
|
|
54203
|
+
sectionType: {},
|
|
54204
|
+
isLocked: { default: false }
|
|
54205
|
+
};
|
|
54206
|
+
},
|
|
54207
|
+
addNodeView() {
|
|
54208
|
+
return ({ node, editor, getPos, decorations }) => {
|
|
54209
|
+
return new DocumentSectionView(node, getPos, decorations, editor);
|
|
54210
|
+
};
|
|
54211
|
+
},
|
|
54212
|
+
addCommands() {
|
|
54213
|
+
return {
|
|
54214
|
+
/**
|
|
54215
|
+
* Create a lockable content section
|
|
54216
|
+
* @category Command
|
|
54217
|
+
* @param {SectionCreate} [options={}] - Section configuration
|
|
54218
|
+
* @example
|
|
54219
|
+
* editor.commands.createDocumentSection({
|
|
54220
|
+
* id: 1,
|
|
54221
|
+
* title: 'Terms & Conditions',
|
|
54222
|
+
* isLocked: true,
|
|
54223
|
+
* html: '<p>Legal content...</p>'
|
|
54224
|
+
* })
|
|
54225
|
+
*/
|
|
54226
|
+
createDocumentSection: (options = {}) => ({ tr, state: state2, dispatch, editor }) => {
|
|
54227
|
+
const { selection } = state2;
|
|
54228
|
+
let { from: from2, to } = selection;
|
|
54229
|
+
let content = selection.content().content;
|
|
54230
|
+
const { html: optionsHTML, json: optionsJSON } = options;
|
|
54231
|
+
if (optionsHTML) {
|
|
54232
|
+
const html = htmlHandler(optionsHTML, this.editor);
|
|
54233
|
+
const doc2 = DOMParser$1.fromSchema(this.editor.schema).parse(html);
|
|
54234
|
+
content = doc2.content;
|
|
54235
|
+
}
|
|
54236
|
+
if (optionsJSON) {
|
|
54237
|
+
content = this.editor.schema.nodeFromJSON(optionsJSON);
|
|
54238
|
+
}
|
|
54239
|
+
if (!content?.content?.length) {
|
|
54240
|
+
content = this.editor.schema.nodeFromJSON({ type: "paragraph", content: [] });
|
|
54241
|
+
}
|
|
54242
|
+
if (!options.id) {
|
|
54243
|
+
const allSections = SectionHelpers.getAllSections(editor);
|
|
54244
|
+
options.id = allSections.length + 1;
|
|
54245
|
+
}
|
|
54246
|
+
if (!options.title) {
|
|
54247
|
+
options.title = "Document section";
|
|
54248
|
+
}
|
|
54249
|
+
const node = this.type.createAndFill(options, content);
|
|
54250
|
+
if (!node) return false;
|
|
54251
|
+
const isAlreadyInSdtBlock = findParentNode((node2) => node2.type.name === "documentSection")(selection);
|
|
54252
|
+
if (isAlreadyInSdtBlock && isAlreadyInSdtBlock.node) {
|
|
54253
|
+
const insertPos2 = isAlreadyInSdtBlock.pos + isAlreadyInSdtBlock.node.nodeSize;
|
|
54254
|
+
from2 = insertPos2;
|
|
54255
|
+
to = insertPos2;
|
|
54256
|
+
}
|
|
54257
|
+
tr.replaceRangeWith(from2, to, node);
|
|
54258
|
+
const nodeEnd = from2 + node.nodeSize;
|
|
54259
|
+
let shouldInsertParagraph = true;
|
|
54260
|
+
let insertPos = nodeEnd;
|
|
54261
|
+
if (nodeEnd >= tr.doc.content.size) {
|
|
54262
|
+
insertPos = tr.doc.content.size;
|
|
54263
|
+
if (insertPos > 0) {
|
|
54264
|
+
const $endPos = tr.doc.resolve(insertPos);
|
|
54265
|
+
if ($endPos.nodeBefore && $endPos.nodeBefore.type.name === "paragraph") {
|
|
54266
|
+
shouldInsertParagraph = false;
|
|
54267
|
+
}
|
|
54268
|
+
}
|
|
54269
|
+
}
|
|
54270
|
+
if (shouldInsertParagraph) {
|
|
54271
|
+
const emptyParagraph = tr.doc.type.schema.nodes.paragraph.create();
|
|
54272
|
+
tr.insert(insertPos, emptyParagraph);
|
|
54273
|
+
}
|
|
54274
|
+
if (dispatch) {
|
|
54275
|
+
tr.setMeta("documentSection", { action: "create" });
|
|
54276
|
+
dispatch(tr);
|
|
54277
|
+
setTimeout(() => {
|
|
54278
|
+
try {
|
|
54279
|
+
const currentState = editor.state;
|
|
54280
|
+
const docSize = currentState.doc.content.size;
|
|
54281
|
+
let targetPos = from2 + node.nodeSize;
|
|
54282
|
+
if (shouldInsertParagraph) {
|
|
54283
|
+
targetPos += 1;
|
|
54284
|
+
}
|
|
54285
|
+
targetPos = Math.min(targetPos, docSize);
|
|
54286
|
+
if (targetPos < docSize && targetPos > 0) {
|
|
54287
|
+
const newSelection = Selection.near(currentState.doc.resolve(targetPos));
|
|
54288
|
+
const newTr = currentState.tr.setSelection(newSelection);
|
|
54289
|
+
editor.view.dispatch(newTr);
|
|
54290
|
+
}
|
|
54291
|
+
} catch (e) {
|
|
54292
|
+
console.warn("Could not set delayed selection:", e);
|
|
54293
|
+
}
|
|
54294
|
+
}, 0);
|
|
54295
|
+
}
|
|
54296
|
+
return true;
|
|
54297
|
+
},
|
|
54298
|
+
/**
|
|
54299
|
+
* Remove section wrapper at cursor, preserving its content
|
|
54300
|
+
* @category Command
|
|
54301
|
+
* @example
|
|
54302
|
+
* editor.commands.removeSectionAtSelection()
|
|
54303
|
+
* @note Content stays in document, only section wrapper is removed
|
|
54304
|
+
*/
|
|
54305
|
+
removeSectionAtSelection: () => ({ tr, dispatch }) => {
|
|
54306
|
+
const sdtNode = findParentNode((node2) => node2.type.name === "documentSection")(tr.selection);
|
|
54307
|
+
if (!sdtNode) return false;
|
|
54308
|
+
const { node, pos } = sdtNode;
|
|
54309
|
+
const nodeStart = pos;
|
|
54310
|
+
const nodeEnd = nodeStart + node.nodeSize;
|
|
54311
|
+
const contentToPreserve = node.content;
|
|
54312
|
+
tr.delete(nodeStart, nodeEnd);
|
|
54313
|
+
if (contentToPreserve.size > 0) {
|
|
54314
|
+
tr.insert(nodeStart, contentToPreserve);
|
|
54315
|
+
}
|
|
54316
|
+
const newPos = Math.min(nodeStart, tr.doc.content.size);
|
|
54317
|
+
tr.setSelection(Selection.near(tr.doc.resolve(newPos)));
|
|
54318
|
+
if (dispatch) {
|
|
54319
|
+
tr.setMeta("documentSection", { action: "delete" });
|
|
54320
|
+
dispatch(tr);
|
|
54321
|
+
}
|
|
54322
|
+
return true;
|
|
54323
|
+
},
|
|
54324
|
+
/**
|
|
54325
|
+
* Delete section and all its content
|
|
54326
|
+
* @category Command
|
|
54327
|
+
* @param {number} id - Section to delete
|
|
54328
|
+
* @example
|
|
54329
|
+
* editor.commands.removeSectionById(123)
|
|
54330
|
+
*/
|
|
54331
|
+
removeSectionById: (id) => ({ tr, dispatch }) => {
|
|
54332
|
+
const sections = SectionHelpers.getAllSections(this.editor);
|
|
54333
|
+
const sectionToRemove = sections.find(({ node: node2 }) => node2.attrs.id === id);
|
|
54334
|
+
if (!sectionToRemove) return false;
|
|
54335
|
+
const { pos, node } = sectionToRemove;
|
|
54336
|
+
const nodeStart = pos;
|
|
54337
|
+
const nodeEnd = nodeStart + node.nodeSize;
|
|
54338
|
+
tr.delete(nodeStart, nodeEnd);
|
|
54339
|
+
if (dispatch) {
|
|
54340
|
+
tr.setMeta("documentSection", { action: "delete", id });
|
|
54341
|
+
dispatch(tr);
|
|
54342
|
+
}
|
|
54343
|
+
return true;
|
|
54344
|
+
},
|
|
54345
|
+
/**
|
|
54346
|
+
* Lock section against edits
|
|
54347
|
+
* @category Command
|
|
54348
|
+
* @param {number} id - Section to lock
|
|
54349
|
+
* @example
|
|
54350
|
+
* editor.commands.lockSectionById(123)
|
|
54351
|
+
*/
|
|
54352
|
+
lockSectionById: (id) => ({ tr, dispatch }) => {
|
|
54353
|
+
const sections = SectionHelpers.getAllSections(this.editor);
|
|
54354
|
+
const sectionToLock = sections.find(({ node }) => node.attrs.id === id);
|
|
54355
|
+
if (!sectionToLock) return false;
|
|
54356
|
+
tr.setNodeMarkup(sectionToLock.pos, null, { ...sectionToLock.node.attrs, isLocked: true });
|
|
54357
|
+
if (dispatch) {
|
|
54358
|
+
tr.setMeta("documentSection", { action: "lock", id });
|
|
54359
|
+
dispatch(tr);
|
|
54360
|
+
}
|
|
54361
|
+
return true;
|
|
54362
|
+
},
|
|
54363
|
+
/**
|
|
54364
|
+
* Modify section attributes or content
|
|
54365
|
+
* @category Command
|
|
54366
|
+
* @param {SectionUpdate} options - Changes to apply
|
|
54367
|
+
* @example
|
|
54368
|
+
* editor.commands.updateSectionById({ id: 123, attrs: { isLocked: false } })
|
|
54369
|
+
* editor.commands.updateSectionById({ id: 123, html: '<p>New content</p>' })
|
|
54370
|
+
* editor.commands.updateSectionById({
|
|
54371
|
+
* id: 123,
|
|
54372
|
+
* html: '<p>Updated</p>',
|
|
54373
|
+
* attrs: { title: 'New Title' }
|
|
54374
|
+
* })
|
|
54375
|
+
*/
|
|
54376
|
+
updateSectionById: ({ id, html, json, attrs }) => ({ tr, dispatch, editor }) => {
|
|
54377
|
+
const sections = SectionHelpers.getAllSections(editor || this.editor);
|
|
54378
|
+
const sectionToUpdate = sections.find(({ node: node2 }) => node2.attrs.id === id);
|
|
54379
|
+
if (!sectionToUpdate) return false;
|
|
54380
|
+
const { pos, node } = sectionToUpdate;
|
|
54381
|
+
let newContent = null;
|
|
54382
|
+
if (html) {
|
|
54383
|
+
const htmlDoc = htmlHandler(html, editor || this.editor);
|
|
54384
|
+
const doc2 = DOMParser$1.fromSchema((editor || this.editor).schema).parse(htmlDoc);
|
|
54385
|
+
newContent = doc2.content;
|
|
54386
|
+
}
|
|
54387
|
+
if (json) {
|
|
54388
|
+
newContent = (editor || this.editor).schema.nodeFromJSON(json);
|
|
54389
|
+
}
|
|
54390
|
+
if (!newContent) {
|
|
54391
|
+
newContent = node.content;
|
|
54392
|
+
}
|
|
54393
|
+
const updatedNode = node.type.create({ ...node.attrs, ...attrs }, newContent, node.marks);
|
|
54394
|
+
tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
|
|
54395
|
+
if (dispatch) {
|
|
54396
|
+
tr.setMeta("documentSection", { action: "update", id, attrs });
|
|
54397
|
+
dispatch(tr);
|
|
54398
|
+
}
|
|
54399
|
+
return true;
|
|
54400
|
+
}
|
|
54401
|
+
};
|
|
54402
|
+
},
|
|
54403
|
+
addHelpers() {
|
|
54404
|
+
return {
|
|
54405
|
+
...SectionHelpers
|
|
54406
|
+
};
|
|
54407
|
+
}
|
|
54408
|
+
});
|
|
54409
|
+
const Document = Node$1.create({
|
|
54410
|
+
name: "doc",
|
|
54411
|
+
topNode: true,
|
|
54412
|
+
content: "block+",
|
|
54413
|
+
parseDOM() {
|
|
54414
|
+
return [{ tag: "doc" }];
|
|
54415
|
+
},
|
|
54416
|
+
renderDOM() {
|
|
54417
|
+
return ["doc", 0];
|
|
54418
|
+
},
|
|
54419
|
+
addAttributes() {
|
|
54420
|
+
return {
|
|
54421
|
+
attributes: {
|
|
54422
|
+
rendered: false,
|
|
54423
|
+
"aria-label": "Document node"
|
|
54424
|
+
}
|
|
54425
|
+
};
|
|
54426
|
+
},
|
|
54427
|
+
addCommands() {
|
|
54428
|
+
return {
|
|
54429
|
+
/**
|
|
54430
|
+
* Get document statistics
|
|
54431
|
+
* @category Command
|
|
54432
|
+
* @example
|
|
54433
|
+
* // Get word and character count
|
|
54434
|
+
* const stats = editor.commands.getDocumentStats()
|
|
54435
|
+
* console.log(`${stats.words} words, ${stats.characters} characters`)
|
|
54436
|
+
* @note Returns word count, character count, and paragraph count
|
|
54437
|
+
*/
|
|
54438
|
+
getDocumentStats: () => ({ editor }) => {
|
|
54439
|
+
const text = editor.getText();
|
|
54440
|
+
const words = text.split(/\s+/).filter((word) => word.length > 0).length;
|
|
54441
|
+
const characters = text.length;
|
|
54442
|
+
const paragraphs = editor.state.doc.content.childCount;
|
|
54443
|
+
return {
|
|
54444
|
+
words,
|
|
54445
|
+
characters,
|
|
54446
|
+
paragraphs
|
|
54447
|
+
};
|
|
54448
|
+
},
|
|
54449
|
+
/**
|
|
54450
|
+
* Clear entire document
|
|
54451
|
+
* @category Command
|
|
54452
|
+
* @example
|
|
54453
|
+
* editor.commands.clearDocument()
|
|
54454
|
+
* @note Replaces all content with an empty paragraph
|
|
54455
|
+
*/
|
|
54456
|
+
clearDocument: () => ({ commands: commands2 }) => {
|
|
54457
|
+
return commands2.setContent("<p></p>");
|
|
54458
|
+
}
|
|
54459
|
+
};
|
|
54460
|
+
}
|
|
54461
|
+
});
|
|
54462
|
+
const Text = Node$1.create({
|
|
54463
|
+
name: "text",
|
|
54464
|
+
group: "inline",
|
|
54465
|
+
inline: true,
|
|
54466
|
+
addOptions() {
|
|
54467
|
+
return {};
|
|
54468
|
+
}
|
|
54469
|
+
});
|
|
54470
|
+
const splitRun = () => (props) => {
|
|
54471
|
+
const { state: state2, view, tr } = props;
|
|
54472
|
+
const { $from, empty: empty2 } = state2.selection;
|
|
54473
|
+
if (!empty2) return false;
|
|
54474
|
+
if ($from.parent.type.name !== "run") return false;
|
|
54475
|
+
const handled = splitBlock(state2, (transaction) => {
|
|
54476
|
+
view.dispatch(transaction);
|
|
54477
|
+
});
|
|
54478
|
+
if (handled) {
|
|
54479
|
+
tr.setMeta("preventDispatch", true);
|
|
54480
|
+
}
|
|
54481
|
+
return handled;
|
|
54482
|
+
};
|
|
54483
|
+
const Run = OxmlNode.create({
|
|
54484
|
+
name: "run",
|
|
54485
|
+
oXmlName: "w:r",
|
|
54486
|
+
group: "inline",
|
|
54487
|
+
inline: true,
|
|
54488
|
+
content: "inline*",
|
|
54489
|
+
selectable: false,
|
|
54490
|
+
childToAttributes: ["runProperties"],
|
|
54491
|
+
addOptions() {
|
|
54492
|
+
return {
|
|
54493
|
+
htmlAttributes: {
|
|
54494
|
+
"data-run": "1"
|
|
54495
|
+
}
|
|
54496
|
+
};
|
|
54497
|
+
},
|
|
54498
|
+
addAttributes() {
|
|
54499
|
+
return {
|
|
54500
|
+
runProperties: {
|
|
54501
|
+
default: null,
|
|
54502
|
+
rendered: false,
|
|
54503
|
+
keepOnSplit: true
|
|
54504
|
+
},
|
|
54505
|
+
rsidR: {
|
|
54506
|
+
default: null,
|
|
54507
|
+
rendered: false,
|
|
54508
|
+
keepOnSplit: true
|
|
54509
|
+
},
|
|
54510
|
+
rsidRPr: {
|
|
54511
|
+
default: null,
|
|
54512
|
+
rendered: false,
|
|
54513
|
+
keepOnSplit: true
|
|
54514
|
+
},
|
|
54515
|
+
rsidDel: {
|
|
54516
|
+
default: null,
|
|
54517
|
+
rendered: false,
|
|
54518
|
+
keepOnSplit: true
|
|
54519
|
+
}
|
|
54520
|
+
};
|
|
54521
|
+
},
|
|
54522
|
+
addCommands() {
|
|
54523
|
+
return {
|
|
54524
|
+
splitRun
|
|
54525
|
+
};
|
|
54526
|
+
},
|
|
54527
|
+
parseDOM() {
|
|
54528
|
+
return [{ tag: "span[data-run]" }];
|
|
54529
|
+
},
|
|
54530
|
+
renderDOM({ htmlAttributes }) {
|
|
54531
|
+
const base2 = Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
|
|
54532
|
+
return ["span", base2, 0];
|
|
54533
|
+
}
|
|
54534
|
+
});
|
|
54535
|
+
const inputRegex$1 = /^\s*([-+*])\s$/;
|
|
54536
|
+
const BulletList = Node$1.create({
|
|
54537
|
+
name: "bulletList",
|
|
54538
|
+
group: "block list",
|
|
54539
|
+
selectable: false,
|
|
54540
|
+
content() {
|
|
54541
|
+
return `${this.options.itemTypeName}+`;
|
|
54542
|
+
},
|
|
54543
|
+
addOptions() {
|
|
54544
|
+
return {
|
|
54545
|
+
itemTypeName: "listItem",
|
|
54546
|
+
htmlAttributes: {
|
|
54547
|
+
"aria-label": "Bullet list node"
|
|
54548
|
+
},
|
|
54549
|
+
keepMarks: true,
|
|
54550
|
+
keepAttributes: false
|
|
54551
|
+
};
|
|
54552
|
+
},
|
|
54553
|
+
parseDOM() {
|
|
54554
|
+
return [{ tag: "ul" }];
|
|
54555
|
+
},
|
|
54556
|
+
renderDOM({ htmlAttributes }) {
|
|
54557
|
+
const attributes = Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
|
|
54558
|
+
return ["ul", attributes, 0];
|
|
54559
|
+
},
|
|
54560
|
+
addAttributes() {
|
|
54561
|
+
return {
|
|
54562
|
+
"list-style-type": {
|
|
54563
|
+
default: "bullet",
|
|
54564
|
+
rendered: false
|
|
54565
|
+
},
|
|
54566
|
+
listId: {
|
|
54567
|
+
rendered: false
|
|
54568
|
+
},
|
|
54569
|
+
sdBlockId: {
|
|
54570
|
+
default: null,
|
|
54571
|
+
keepOnSplit: false,
|
|
54572
|
+
parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
|
|
54573
|
+
renderDOM: (attrs) => {
|
|
54574
|
+
return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
|
|
54575
|
+
}
|
|
54576
|
+
},
|
|
54577
|
+
attributes: {
|
|
54578
|
+
rendered: false,
|
|
54579
|
+
keepOnSplit: true
|
|
54580
|
+
}
|
|
54581
|
+
};
|
|
54582
|
+
},
|
|
54583
|
+
addCommands() {
|
|
54584
|
+
return {
|
|
54585
|
+
/**
|
|
54586
|
+
* Toggle a bullet list at the current selection
|
|
54587
|
+
* @category Command
|
|
54588
|
+
* @example
|
|
54589
|
+
* // Toggle bullet list on selected text
|
|
54590
|
+
* editor.commands.toggleBulletList()
|
|
54591
|
+
* @note Converts selected paragraphs to list items or removes list formatting
|
|
54592
|
+
*/
|
|
54593
|
+
toggleBulletList: () => (params2) => {
|
|
54594
|
+
return toggleList(this.type)(params2);
|
|
54595
|
+
}
|
|
54596
|
+
};
|
|
54597
|
+
},
|
|
54598
|
+
addShortcuts() {
|
|
54599
|
+
return {
|
|
54600
|
+
"Mod-Shift-8": () => {
|
|
54601
|
+
return this.editor.commands.toggleBulletList();
|
|
54602
|
+
}
|
|
54603
|
+
};
|
|
54604
|
+
},
|
|
54605
|
+
addInputRules() {
|
|
54606
|
+
return [
|
|
54607
|
+
new InputRule({
|
|
54608
|
+
match: inputRegex$1,
|
|
54609
|
+
handler: ({ state: state2, range: range2 }) => {
|
|
54610
|
+
const $pos = state2.selection.$from;
|
|
54611
|
+
const listItemType = state2.schema.nodes.listItem;
|
|
54612
|
+
for (let depth = $pos.depth; depth >= 0; depth--) {
|
|
54613
|
+
if ($pos.node(depth).type === listItemType) {
|
|
54614
|
+
return null;
|
|
54615
|
+
}
|
|
54616
|
+
}
|
|
54617
|
+
const { tr } = state2;
|
|
54618
|
+
tr.delete(range2.from, range2.to);
|
|
54619
|
+
ListHelpers.createNewList({
|
|
54620
|
+
listType: this.type,
|
|
54621
|
+
tr,
|
|
54622
|
+
editor: this.editor
|
|
54623
|
+
});
|
|
54624
|
+
}
|
|
54625
|
+
})
|
|
54626
|
+
];
|
|
54627
|
+
}
|
|
54628
|
+
});
|
|
54629
|
+
const inputRegex = /^(\d+)\.\s$/;
|
|
54630
|
+
const OrderedList = Node$1.create({
|
|
53595
54631
|
name: "orderedList",
|
|
53596
54632
|
group: "block list",
|
|
53597
54633
|
selectable: false,
|
|
@@ -54952,7 +55988,7 @@ class ListItemNodeView {
|
|
|
54952
55988
|
this.decorations = decorations;
|
|
54953
55989
|
this.view = editor.view;
|
|
54954
55990
|
this.getPos = getPos;
|
|
54955
|
-
__privateMethod$1(this, _ListItemNodeView_instances,
|
|
55991
|
+
__privateMethod$1(this, _ListItemNodeView_instances, init_fn3).call(this);
|
|
54956
55992
|
activeListItemNodeViews.add(this);
|
|
54957
55993
|
}
|
|
54958
55994
|
refreshIndentStyling() {
|
|
@@ -55013,7 +56049,7 @@ class ListItemNodeView {
|
|
|
55013
56049
|
}
|
|
55014
56050
|
}
|
|
55015
56051
|
_ListItemNodeView_instances = /* @__PURE__ */ new WeakSet();
|
|
55016
|
-
|
|
56052
|
+
init_fn3 = function() {
|
|
55017
56053
|
const { attrs } = this.node;
|
|
55018
56054
|
const { listLevel, listNumberingType, lvlText, numId, level, customFormat } = attrs;
|
|
55019
56055
|
let orderMarker = "";
|
|
@@ -62122,984 +63158,335 @@ const PageNumber = Node$1.create({
|
|
|
62122
63158
|
}
|
|
62123
63159
|
};
|
|
62124
63160
|
},
|
|
62125
|
-
addAttributes() {
|
|
62126
|
-
return {
|
|
62127
|
-
marksAsAttrs: {
|
|
62128
|
-
default: null,
|
|
62129
|
-
rendered: false
|
|
62130
|
-
}
|
|
62131
|
-
};
|
|
62132
|
-
},
|
|
62133
|
-
addNodeView() {
|
|
62134
|
-
return ({ node, editor, getPos, decorations }) => {
|
|
62135
|
-
const htmlAttributes = this.options.htmlAttributes;
|
|
62136
|
-
return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
|
|
62137
|
-
};
|
|
62138
|
-
},
|
|
62139
|
-
parseDOM() {
|
|
62140
|
-
return [{ tag: 'span[data-id="auto-page-number"' }];
|
|
62141
|
-
},
|
|
62142
|
-
renderDOM({ htmlAttributes }) {
|
|
62143
|
-
return ["span", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
|
|
62144
|
-
},
|
|
62145
|
-
addCommands() {
|
|
62146
|
-
return {
|
|
62147
|
-
/**
|
|
62148
|
-
* Insert an automatic page number
|
|
62149
|
-
* @category Command
|
|
62150
|
-
* @returns {Function} Command function
|
|
62151
|
-
* @example
|
|
62152
|
-
* editor.commands.addAutoPageNumber()
|
|
62153
|
-
* @note Only works in header/footer contexts
|
|
62154
|
-
*/
|
|
62155
|
-
addAutoPageNumber: () => ({ tr, dispatch, state: state2, editor }) => {
|
|
62156
|
-
const { options } = editor;
|
|
62157
|
-
if (!options.isHeaderOrFooter) return false;
|
|
62158
|
-
const { schema } = state2;
|
|
62159
|
-
const pageNumberType = schema?.nodes?.["page-number"];
|
|
62160
|
-
if (!pageNumberType) return false;
|
|
62161
|
-
const pageNumberNodeJSON = { type: "page-number" };
|
|
62162
|
-
const pageNumberNode = schema.nodeFromJSON(pageNumberNodeJSON);
|
|
62163
|
-
if (dispatch) {
|
|
62164
|
-
tr.replaceSelectionWith(pageNumberNode, false);
|
|
62165
|
-
tr.setMeta("forceUpdatePagination", true);
|
|
62166
|
-
}
|
|
62167
|
-
return true;
|
|
62168
|
-
}
|
|
62169
|
-
};
|
|
62170
|
-
},
|
|
62171
|
-
addShortcuts() {
|
|
62172
|
-
return {
|
|
62173
|
-
"Mod-Shift-alt-p": () => this.editor.commands.addAutoPageNumber()
|
|
62174
|
-
};
|
|
62175
|
-
}
|
|
62176
|
-
});
|
|
62177
|
-
const TotalPageCount = Node$1.create({
|
|
62178
|
-
name: "total-page-number",
|
|
62179
|
-
group: "inline",
|
|
62180
|
-
inline: true,
|
|
62181
|
-
atom: true,
|
|
62182
|
-
draggable: false,
|
|
62183
|
-
selectable: false,
|
|
62184
|
-
content: "text*",
|
|
62185
|
-
addOptions() {
|
|
62186
|
-
return {
|
|
62187
|
-
htmlAttributes: {
|
|
62188
|
-
contenteditable: false,
|
|
62189
|
-
"data-id": "auto-total-pages",
|
|
62190
|
-
"aria-label": "Total page count node",
|
|
62191
|
-
class: "sd-editor-auto-total-pages"
|
|
62192
|
-
}
|
|
62193
|
-
};
|
|
62194
|
-
},
|
|
62195
|
-
addAttributes() {
|
|
62196
|
-
return {
|
|
62197
|
-
marksAsAttrs: {
|
|
62198
|
-
default: null,
|
|
62199
|
-
rendered: false
|
|
62200
|
-
}
|
|
62201
|
-
};
|
|
62202
|
-
},
|
|
62203
|
-
addNodeView() {
|
|
62204
|
-
return ({ node, editor, getPos, decorations }) => {
|
|
62205
|
-
const htmlAttributes = this.options.htmlAttributes;
|
|
62206
|
-
return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
|
|
62207
|
-
};
|
|
62208
|
-
},
|
|
62209
|
-
parseDOM() {
|
|
62210
|
-
return [{ tag: 'span[data-id="auto-total-pages"' }];
|
|
62211
|
-
},
|
|
62212
|
-
renderDOM({ htmlAttributes }) {
|
|
62213
|
-
return ["span", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
|
|
62214
|
-
},
|
|
62215
|
-
addCommands() {
|
|
62216
|
-
return {
|
|
62217
|
-
/**
|
|
62218
|
-
* Insert total page count
|
|
62219
|
-
* @category Command
|
|
62220
|
-
* @returns {Function} Command function
|
|
62221
|
-
* @example
|
|
62222
|
-
* editor.commands.addTotalPageCount()
|
|
62223
|
-
* @note Only works in header/footer contexts
|
|
62224
|
-
*/
|
|
62225
|
-
addTotalPageCount: () => ({ tr, dispatch, state: state2, editor }) => {
|
|
62226
|
-
const { options } = editor;
|
|
62227
|
-
if (!options.isHeaderOrFooter) return false;
|
|
62228
|
-
const { schema } = state2;
|
|
62229
|
-
const pageNumberType = schema.nodes?.["total-page-number"];
|
|
62230
|
-
if (!pageNumberType) return false;
|
|
62231
|
-
const currentPages = editor?.options?.parentEditor?.currentTotalPages || 1;
|
|
62232
|
-
const pageNumberNode = {
|
|
62233
|
-
type: "total-page-number",
|
|
62234
|
-
content: [{ type: "text", text: String(currentPages) }]
|
|
62235
|
-
};
|
|
62236
|
-
const pageNode = schema.nodeFromJSON(pageNumberNode);
|
|
62237
|
-
if (dispatch) {
|
|
62238
|
-
tr.replaceSelectionWith(pageNode, false);
|
|
62239
|
-
}
|
|
62240
|
-
return true;
|
|
62241
|
-
}
|
|
62242
|
-
};
|
|
62243
|
-
},
|
|
62244
|
-
addShortcuts() {
|
|
62245
|
-
return {
|
|
62246
|
-
"Mod-Shift-alt-c": () => this.editor.commands.addTotalPageCount()
|
|
62247
|
-
};
|
|
62248
|
-
}
|
|
62249
|
-
});
|
|
62250
|
-
const getNodeAttributes = (nodeName, editor) => {
|
|
62251
|
-
switch (nodeName) {
|
|
62252
|
-
case "page-number":
|
|
62253
|
-
return {
|
|
62254
|
-
text: editor.options.currentPageNumber || "1",
|
|
62255
|
-
className: "sd-editor-auto-page-number",
|
|
62256
|
-
dataId: "auto-page-number",
|
|
62257
|
-
ariaLabel: "Page number node"
|
|
62258
|
-
};
|
|
62259
|
-
case "total-page-number":
|
|
62260
|
-
return {
|
|
62261
|
-
text: editor.options.parentEditor?.currentTotalPages || "1",
|
|
62262
|
-
className: "sd-editor-auto-total-pages",
|
|
62263
|
-
dataId: "auto-total-pages",
|
|
62264
|
-
ariaLabel: "Total page count node"
|
|
62265
|
-
};
|
|
62266
|
-
default:
|
|
62267
|
-
return {};
|
|
62268
|
-
}
|
|
62269
|
-
};
|
|
62270
|
-
class AutoPageNumberNodeView {
|
|
62271
|
-
constructor(node, getPos, decorations, editor, htmlAttributes = {}) {
|
|
62272
|
-
__privateAdd$1(this, _AutoPageNumberNodeView_instances);
|
|
62273
|
-
this.node = node;
|
|
62274
|
-
this.editor = editor;
|
|
62275
|
-
this.view = editor.view;
|
|
62276
|
-
this.getPos = getPos;
|
|
62277
|
-
this.editor = editor;
|
|
62278
|
-
this.dom = __privateMethod$1(this, _AutoPageNumberNodeView_instances, renderDom_fn).call(this, node, htmlAttributes);
|
|
62279
|
-
}
|
|
62280
|
-
update(node) {
|
|
62281
|
-
const incomingType = node?.type?.name;
|
|
62282
|
-
const currentType = this.node?.type?.name;
|
|
62283
|
-
if (!incomingType || incomingType !== currentType) return false;
|
|
62284
|
-
this.node = node;
|
|
62285
|
-
return true;
|
|
62286
|
-
}
|
|
62287
|
-
}
|
|
62288
|
-
_AutoPageNumberNodeView_instances = /* @__PURE__ */ new WeakSet();
|
|
62289
|
-
renderDom_fn = function(node, htmlAttributes) {
|
|
62290
|
-
const attrs = getNodeAttributes(this.node.type.name, this.editor);
|
|
62291
|
-
const content = document.createTextNode(String(attrs.text));
|
|
62292
|
-
const nodeContent = document.createElement("span");
|
|
62293
|
-
nodeContent.className = attrs.className;
|
|
62294
|
-
nodeContent.setAttribute("data-id", attrs.dataId);
|
|
62295
|
-
nodeContent.setAttribute("aria-label", attrs.ariaLabel);
|
|
62296
|
-
const currentPos = this.getPos();
|
|
62297
|
-
const { styles, marks } = getMarksFromNeighbors(currentPos, this.view);
|
|
62298
|
-
__privateMethod$1(this, _AutoPageNumberNodeView_instances, scheduleUpdateNodeStyle_fn).call(this, currentPos, marks);
|
|
62299
|
-
Object.assign(nodeContent.style, styles);
|
|
62300
|
-
nodeContent.appendChild(content);
|
|
62301
|
-
Object.entries(htmlAttributes).forEach(([key2, value]) => {
|
|
62302
|
-
if (value) nodeContent.setAttribute(key2, value);
|
|
62303
|
-
});
|
|
62304
|
-
return nodeContent;
|
|
62305
|
-
};
|
|
62306
|
-
scheduleUpdateNodeStyle_fn = function(pos, marks) {
|
|
62307
|
-
setTimeout(() => {
|
|
62308
|
-
const { state: state2 } = this.editor;
|
|
62309
|
-
const { dispatch } = this.view;
|
|
62310
|
-
const node = state2.doc.nodeAt(pos);
|
|
62311
|
-
if (!node || node.isText) return;
|
|
62312
|
-
const currentMarks = node.attrs.marksAsAttrs || [];
|
|
62313
|
-
const newMarks = marks.map((m2) => ({ type: m2.type.name, attrs: m2.attrs }));
|
|
62314
|
-
const isEqual = JSON.stringify(currentMarks) === JSON.stringify(newMarks);
|
|
62315
|
-
if (isEqual) return;
|
|
62316
|
-
const newAttrs = {
|
|
62317
|
-
...node.attrs,
|
|
62318
|
-
marksAsAttrs: newMarks
|
|
62319
|
-
};
|
|
62320
|
-
const tr = state2.tr.setNodeMarkup(pos, void 0, newAttrs);
|
|
62321
|
-
dispatch(tr);
|
|
62322
|
-
}, 0);
|
|
62323
|
-
};
|
|
62324
|
-
const getMarksFromNeighbors = (currentPos, view) => {
|
|
62325
|
-
const $pos = view.state.doc.resolve(currentPos);
|
|
62326
|
-
const styles = {};
|
|
62327
|
-
const marks = [];
|
|
62328
|
-
const before = $pos.nodeBefore;
|
|
62329
|
-
if (before) {
|
|
62330
|
-
Object.assign(styles, processMarks(before.marks));
|
|
62331
|
-
marks.push(...before.marks);
|
|
62332
|
-
}
|
|
62333
|
-
const after = $pos.nodeAfter;
|
|
62334
|
-
if (after) {
|
|
62335
|
-
Object.assign(styles, { ...styles, ...processMarks(after.marks) });
|
|
62336
|
-
marks.push(...after.marks);
|
|
62337
|
-
}
|
|
62338
|
-
return {
|
|
62339
|
-
styles,
|
|
62340
|
-
marks
|
|
62341
|
-
};
|
|
62342
|
-
};
|
|
62343
|
-
const processMarks = (marks) => {
|
|
62344
|
-
const styles = {};
|
|
62345
|
-
marks.forEach((mark) => {
|
|
62346
|
-
const { type: type2, attrs } = mark;
|
|
62347
|
-
switch (type2.name) {
|
|
62348
|
-
case "textStyle":
|
|
62349
|
-
if (attrs.fontFamily) styles["font-family"] = attrs.fontFamily;
|
|
62350
|
-
if (attrs.fontSize) styles["font-size"] = attrs.fontSize;
|
|
62351
|
-
if (attrs.color) styles["color"] = attrs.color;
|
|
62352
|
-
if (attrs.backgroundColor) styles["background-color"] = attrs.backgroundColor;
|
|
62353
|
-
break;
|
|
62354
|
-
case "bold":
|
|
62355
|
-
styles["font-weight"] = "bold";
|
|
62356
|
-
break;
|
|
62357
|
-
case "italic":
|
|
62358
|
-
styles["font-style"] = "italic";
|
|
62359
|
-
break;
|
|
62360
|
-
case "underline":
|
|
62361
|
-
styles["text-decoration"] = (styles["text-decoration"] || "") + " underline";
|
|
62362
|
-
break;
|
|
62363
|
-
case "strike":
|
|
62364
|
-
styles["text-decoration"] = (styles["text-decoration"] || "") + " line-through";
|
|
62365
|
-
break;
|
|
62366
|
-
default:
|
|
62367
|
-
if (attrs?.style) {
|
|
62368
|
-
Object.entries(attrs.style).forEach(([key2, value]) => {
|
|
62369
|
-
styles[key2] = value;
|
|
62370
|
-
});
|
|
62371
|
-
}
|
|
62372
|
-
break;
|
|
62373
|
-
}
|
|
62374
|
-
});
|
|
62375
|
-
return styles;
|
|
62376
|
-
};
|
|
62377
|
-
const ShapeContainer = Node$1.create({
|
|
62378
|
-
name: "shapeContainer",
|
|
62379
|
-
group: "block",
|
|
62380
|
-
content: "block+",
|
|
62381
|
-
isolating: true,
|
|
62382
|
-
addOptions() {
|
|
62383
|
-
return {
|
|
62384
|
-
htmlAttributes: {
|
|
62385
|
-
class: "sd-editor-shape-container",
|
|
62386
|
-
"aria-label": "Shape container node"
|
|
62387
|
-
}
|
|
62388
|
-
};
|
|
62389
|
-
},
|
|
62390
|
-
addAttributes() {
|
|
62391
|
-
return {
|
|
62392
|
-
fillcolor: {
|
|
62393
|
-
renderDOM: (attrs) => {
|
|
62394
|
-
if (!attrs.fillcolor) return {};
|
|
62395
|
-
return {
|
|
62396
|
-
style: `background-color: ${attrs.fillcolor}`
|
|
62397
|
-
};
|
|
62398
|
-
}
|
|
62399
|
-
},
|
|
62400
|
-
sdBlockId: {
|
|
62401
|
-
default: null,
|
|
62402
|
-
keepOnSplit: false,
|
|
62403
|
-
parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
|
|
62404
|
-
renderDOM: (attrs) => {
|
|
62405
|
-
return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
|
|
62406
|
-
}
|
|
62407
|
-
},
|
|
62408
|
-
style: {
|
|
62409
|
-
renderDOM: (attrs) => {
|
|
62410
|
-
if (!attrs.style) return {};
|
|
62411
|
-
return {
|
|
62412
|
-
style: attrs.style
|
|
62413
|
-
};
|
|
62414
|
-
}
|
|
62415
|
-
},
|
|
62416
|
-
wrapAttributes: {
|
|
62417
|
-
rendered: false
|
|
62418
|
-
},
|
|
62419
|
-
attributes: {
|
|
62420
|
-
rendered: false
|
|
62421
|
-
}
|
|
62422
|
-
};
|
|
62423
|
-
},
|
|
62424
|
-
parseDOM() {
|
|
62425
|
-
return [
|
|
62426
|
-
{
|
|
62427
|
-
tag: `div[data-type="${this.name}"]`
|
|
62428
|
-
}
|
|
62429
|
-
];
|
|
62430
|
-
},
|
|
62431
|
-
renderDOM({ htmlAttributes }) {
|
|
62432
|
-
return [
|
|
62433
|
-
"div",
|
|
62434
|
-
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
|
|
62435
|
-
0
|
|
62436
|
-
];
|
|
62437
|
-
}
|
|
62438
|
-
});
|
|
62439
|
-
const ShapeTextbox = Node$1.create({
|
|
62440
|
-
name: "shapeTextbox",
|
|
62441
|
-
group: "block",
|
|
62442
|
-
content: "paragraph* block*",
|
|
62443
|
-
isolating: true,
|
|
62444
|
-
addOptions() {
|
|
62445
|
-
return {
|
|
62446
|
-
htmlAttributes: {
|
|
62447
|
-
class: "sd-editor-shape-textbox",
|
|
62448
|
-
"aria-label": "Shape textbox node"
|
|
62449
|
-
}
|
|
62450
|
-
};
|
|
62451
|
-
},
|
|
62452
|
-
addAttributes() {
|
|
62453
|
-
return {
|
|
62454
|
-
sdBlockId: {
|
|
62455
|
-
default: null,
|
|
62456
|
-
keepOnSplit: false,
|
|
62457
|
-
parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
|
|
62458
|
-
renderDOM: (attrs) => {
|
|
62459
|
-
return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
|
|
62460
|
-
}
|
|
62461
|
-
},
|
|
62462
|
-
attributes: {
|
|
62463
|
-
rendered: false
|
|
62464
|
-
}
|
|
62465
|
-
};
|
|
62466
|
-
},
|
|
62467
|
-
parseDOM() {
|
|
62468
|
-
return [
|
|
62469
|
-
{
|
|
62470
|
-
tag: `div[data-type="${this.name}"]`
|
|
62471
|
-
}
|
|
62472
|
-
];
|
|
62473
|
-
},
|
|
62474
|
-
renderDOM({ htmlAttributes }) {
|
|
62475
|
-
return [
|
|
62476
|
-
"div",
|
|
62477
|
-
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
|
|
62478
|
-
0
|
|
62479
|
-
];
|
|
62480
|
-
}
|
|
62481
|
-
});
|
|
62482
|
-
const ContentBlock = Node$1.create({
|
|
62483
|
-
name: "contentBlock",
|
|
62484
|
-
group: "inline",
|
|
62485
|
-
content: "",
|
|
62486
|
-
isolating: true,
|
|
62487
|
-
atom: true,
|
|
62488
|
-
inline: true,
|
|
62489
|
-
addOptions() {
|
|
62490
|
-
return {
|
|
62491
|
-
htmlAttributes: {
|
|
62492
|
-
contenteditable: false
|
|
62493
|
-
}
|
|
62494
|
-
};
|
|
62495
|
-
},
|
|
62496
|
-
addAttributes() {
|
|
62497
|
-
return {
|
|
62498
|
-
horizontalRule: {
|
|
62499
|
-
default: false,
|
|
62500
|
-
renderDOM: ({ horizontalRule }) => {
|
|
62501
|
-
if (!horizontalRule) return {};
|
|
62502
|
-
return { "data-horizontal-rule": "true" };
|
|
62503
|
-
}
|
|
62504
|
-
},
|
|
62505
|
-
size: {
|
|
62506
|
-
default: null,
|
|
62507
|
-
renderDOM: ({ size: size2 }) => {
|
|
62508
|
-
if (!size2) return {};
|
|
62509
|
-
let style2 = "";
|
|
62510
|
-
if (size2.top) style2 += `top: ${size2.top}px; `;
|
|
62511
|
-
if (size2.left) style2 += `left: ${size2.left}px; `;
|
|
62512
|
-
if (size2.width) style2 += `width: ${size2.width.toString().endsWith("%") ? size2.width : `${size2.width}px`}; `;
|
|
62513
|
-
if (size2.height)
|
|
62514
|
-
style2 += `height: ${size2.height.toString().endsWith("%") ? size2.height : `${size2.height}px`}; `;
|
|
62515
|
-
return { style: style2 };
|
|
62516
|
-
}
|
|
62517
|
-
},
|
|
62518
|
-
background: {
|
|
62519
|
-
default: null,
|
|
62520
|
-
renderDOM: (attrs) => {
|
|
62521
|
-
if (!attrs.background) return {};
|
|
62522
|
-
return {
|
|
62523
|
-
style: `background-color: ${attrs.background}`
|
|
62524
|
-
};
|
|
62525
|
-
}
|
|
62526
|
-
},
|
|
62527
|
-
drawingContent: {
|
|
62528
|
-
rendered: false
|
|
62529
|
-
},
|
|
62530
|
-
attributes: {
|
|
63161
|
+
addAttributes() {
|
|
63162
|
+
return {
|
|
63163
|
+
marksAsAttrs: {
|
|
63164
|
+
default: null,
|
|
62531
63165
|
rendered: false
|
|
62532
63166
|
}
|
|
62533
63167
|
};
|
|
62534
63168
|
},
|
|
63169
|
+
addNodeView() {
|
|
63170
|
+
return ({ node, editor, getPos, decorations }) => {
|
|
63171
|
+
const htmlAttributes = this.options.htmlAttributes;
|
|
63172
|
+
return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
|
|
63173
|
+
};
|
|
63174
|
+
},
|
|
62535
63175
|
parseDOM() {
|
|
62536
|
-
return [
|
|
62537
|
-
{
|
|
62538
|
-
tag: `div[data-type="${this.name}"]`
|
|
62539
|
-
}
|
|
62540
|
-
];
|
|
63176
|
+
return [{ tag: 'span[data-id="auto-page-number"' }];
|
|
62541
63177
|
},
|
|
62542
63178
|
renderDOM({ htmlAttributes }) {
|
|
62543
|
-
return ["
|
|
63179
|
+
return ["span", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
|
|
62544
63180
|
},
|
|
62545
63181
|
addCommands() {
|
|
62546
63182
|
return {
|
|
62547
63183
|
/**
|
|
62548
|
-
* Insert
|
|
62549
|
-
* @category Command
|
|
62550
|
-
* @example
|
|
62551
|
-
* editor.commands.insertHorizontalRule()
|
|
62552
|
-
* @note Creates a visual separator between content sections
|
|
62553
|
-
*/
|
|
62554
|
-
insertHorizontalRule: () => ({ commands: commands2 }) => {
|
|
62555
|
-
return commands2.insertContent({
|
|
62556
|
-
type: this.name,
|
|
62557
|
-
attrs: {
|
|
62558
|
-
horizontalRule: true,
|
|
62559
|
-
size: { width: "100%", height: 2 },
|
|
62560
|
-
background: "#e5e7eb"
|
|
62561
|
-
}
|
|
62562
|
-
});
|
|
62563
|
-
},
|
|
62564
|
-
/**
|
|
62565
|
-
* Insert a content block
|
|
63184
|
+
* Insert an automatic page number
|
|
62566
63185
|
* @category Command
|
|
62567
|
-
* @
|
|
62568
|
-
* @example
|
|
62569
|
-
* // Insert a spacer block
|
|
62570
|
-
* editor.commands.insertContentBlock({ size: { height: 20 } })
|
|
62571
|
-
*
|
|
63186
|
+
* @returns {Function} Command function
|
|
62572
63187
|
* @example
|
|
62573
|
-
*
|
|
62574
|
-
*
|
|
62575
|
-
* size: { width: '50%', height: 3 },
|
|
62576
|
-
* background: '#3b82f6'
|
|
62577
|
-
* })
|
|
62578
|
-
* @note Used for spacing, dividers, and special inline content
|
|
63188
|
+
* editor.commands.addAutoPageNumber()
|
|
63189
|
+
* @note Only works in header/footer contexts
|
|
62579
63190
|
*/
|
|
62580
|
-
|
|
62581
|
-
|
|
62582
|
-
|
|
62583
|
-
|
|
62584
|
-
|
|
63191
|
+
addAutoPageNumber: () => ({ tr, dispatch, state: state2, editor }) => {
|
|
63192
|
+
const { options } = editor;
|
|
63193
|
+
if (!options.isHeaderOrFooter) return false;
|
|
63194
|
+
const { schema } = state2;
|
|
63195
|
+
const pageNumberType = schema?.nodes?.["page-number"];
|
|
63196
|
+
if (!pageNumberType) return false;
|
|
63197
|
+
const pageNumberNodeJSON = { type: "page-number" };
|
|
63198
|
+
const pageNumberNode = schema.nodeFromJSON(pageNumberNodeJSON);
|
|
63199
|
+
if (dispatch) {
|
|
63200
|
+
tr.replaceSelectionWith(pageNumberNode, false);
|
|
63201
|
+
tr.setMeta("forceUpdatePagination", true);
|
|
63202
|
+
}
|
|
63203
|
+
return true;
|
|
62585
63204
|
}
|
|
62586
63205
|
};
|
|
63206
|
+
},
|
|
63207
|
+
addShortcuts() {
|
|
63208
|
+
return {
|
|
63209
|
+
"Mod-Shift-alt-p": () => this.editor.commands.addAutoPageNumber()
|
|
63210
|
+
};
|
|
62587
63211
|
}
|
|
62588
63212
|
});
|
|
62589
|
-
|
|
62590
|
-
|
|
62591
|
-
|
|
62592
|
-
__publicField$1(this, "view");
|
|
62593
|
-
__publicField$1(this, "getPos");
|
|
62594
|
-
__publicField$1(this, "decorations");
|
|
62595
|
-
__publicField$1(this, "innerDecorations");
|
|
62596
|
-
__publicField$1(this, "editor");
|
|
62597
|
-
__publicField$1(this, "extension");
|
|
62598
|
-
__publicField$1(this, "htmlAttributes");
|
|
62599
|
-
__publicField$1(this, "root");
|
|
62600
|
-
__publicField$1(this, "isDragging", false);
|
|
62601
|
-
this.node = props.node;
|
|
62602
|
-
this.view = props.editor.view;
|
|
62603
|
-
this.getPos = props.getPos;
|
|
62604
|
-
this.decorations = props.decorations;
|
|
62605
|
-
this.innerDecorations = props.innerDecorations;
|
|
62606
|
-
this.editor = props.editor;
|
|
62607
|
-
this.extension = props.extension;
|
|
62608
|
-
this.htmlAttributes = props.htmlAttributes;
|
|
62609
|
-
this.mount(props);
|
|
62610
|
-
}
|
|
62611
|
-
mount() {
|
|
62612
|
-
return;
|
|
62613
|
-
}
|
|
62614
|
-
get dom() {
|
|
62615
|
-
return this.root;
|
|
62616
|
-
}
|
|
62617
|
-
get contentDOM() {
|
|
62618
|
-
return null;
|
|
62619
|
-
}
|
|
62620
|
-
update(node, decorations, innerDecorations) {
|
|
62621
|
-
if (node.type !== this.node.type) {
|
|
62622
|
-
return false;
|
|
62623
|
-
}
|
|
62624
|
-
this.node = node;
|
|
62625
|
-
this.decorations = decorations;
|
|
62626
|
-
this.innerDecorations = innerDecorations;
|
|
62627
|
-
this.updateHTMLAttributes();
|
|
62628
|
-
return true;
|
|
62629
|
-
}
|
|
62630
|
-
stopEvent(event) {
|
|
62631
|
-
if (!this.dom) return false;
|
|
62632
|
-
const target = event.target;
|
|
62633
|
-
const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);
|
|
62634
|
-
if (!isInElement) return false;
|
|
62635
|
-
const isDragEvent = event.type.startsWith("drag");
|
|
62636
|
-
const isDropEvent = event.type === "drop";
|
|
62637
|
-
const isInput = ["INPUT", "BUTTON", "SELECT", "TEXTAREA"].includes(target.tagName) || target.isContentEditable;
|
|
62638
|
-
if (isInput && !isDropEvent && !isDragEvent) return true;
|
|
62639
|
-
const { isEditable } = this.editor;
|
|
62640
|
-
const { isDragging } = this;
|
|
62641
|
-
const isDraggable = !!this.node.type.spec.draggable;
|
|
62642
|
-
const isSelectable = NodeSelection.isSelectable(this.node);
|
|
62643
|
-
const isCopyEvent = event.type === "copy";
|
|
62644
|
-
const isPasteEvent = event.type === "paste";
|
|
62645
|
-
const isCutEvent = event.type === "cut";
|
|
62646
|
-
const isClickEvent = event.type === "mousedown";
|
|
62647
|
-
if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
|
|
62648
|
-
event.preventDefault();
|
|
62649
|
-
}
|
|
62650
|
-
if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
|
|
62651
|
-
event.preventDefault();
|
|
62652
|
-
return false;
|
|
62653
|
-
}
|
|
62654
|
-
if (isDraggable && isEditable && !isDragging && isClickEvent) {
|
|
62655
|
-
const dragHandle = target.closest("[data-drag-handle]");
|
|
62656
|
-
const isValidDragHandle = dragHandle && (this.dom === dragHandle || this.dom.contains(dragHandle));
|
|
62657
|
-
if (isValidDragHandle) {
|
|
62658
|
-
this.isDragging = true;
|
|
62659
|
-
document.addEventListener(
|
|
62660
|
-
"dragend",
|
|
62661
|
-
() => {
|
|
62662
|
-
this.isDragging = false;
|
|
62663
|
-
},
|
|
62664
|
-
{ once: true }
|
|
62665
|
-
);
|
|
62666
|
-
document.addEventListener(
|
|
62667
|
-
"drop",
|
|
62668
|
-
() => {
|
|
62669
|
-
this.isDragging = false;
|
|
62670
|
-
},
|
|
62671
|
-
{ once: true }
|
|
62672
|
-
);
|
|
62673
|
-
document.addEventListener(
|
|
62674
|
-
"mouseup",
|
|
62675
|
-
() => {
|
|
62676
|
-
this.isDragging = false;
|
|
62677
|
-
},
|
|
62678
|
-
{ once: true }
|
|
62679
|
-
);
|
|
62680
|
-
}
|
|
62681
|
-
}
|
|
62682
|
-
if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || isClickEvent && isSelectable) {
|
|
62683
|
-
return false;
|
|
62684
|
-
}
|
|
62685
|
-
return true;
|
|
62686
|
-
}
|
|
62687
|
-
ignoreMutation(mutation) {
|
|
62688
|
-
if (!this.dom || !this.contentDOM) return true;
|
|
62689
|
-
if (this.node.isLeaf || this.node.isAtom) return true;
|
|
62690
|
-
if (mutation.type === "selection") return false;
|
|
62691
|
-
if (this.contentDOM === mutation.target && mutation.type === "attributes") return true;
|
|
62692
|
-
if (this.contentDOM.contains(mutation.target)) return false;
|
|
62693
|
-
return true;
|
|
62694
|
-
}
|
|
62695
|
-
destroy() {
|
|
62696
|
-
this.dom.remove();
|
|
62697
|
-
this.contentDOM?.remove();
|
|
62698
|
-
}
|
|
62699
|
-
updateAttributes(attrs) {
|
|
62700
|
-
const pos = this.getPos();
|
|
62701
|
-
if (typeof pos !== "number") {
|
|
62702
|
-
return;
|
|
62703
|
-
}
|
|
62704
|
-
return this.view.dispatch(
|
|
62705
|
-
this.view.state.tr.setNodeMarkup(pos, void 0, {
|
|
62706
|
-
...this.node.attrs,
|
|
62707
|
-
...attrs
|
|
62708
|
-
})
|
|
62709
|
-
);
|
|
62710
|
-
}
|
|
62711
|
-
updateHTMLAttributes() {
|
|
62712
|
-
const { extensionService } = this.editor;
|
|
62713
|
-
const { attributes } = extensionService;
|
|
62714
|
-
const extensionAttrs = attributes.filter((i) => i.type === this.node.type.name);
|
|
62715
|
-
this.htmlAttributes = Attribute2.getAttributesToRender(this.node, extensionAttrs);
|
|
62716
|
-
}
|
|
62717
|
-
createDragHandle() {
|
|
62718
|
-
const dragHandle = document.createElement("span");
|
|
62719
|
-
dragHandle.classList.add("sd-structured-content-draggable");
|
|
62720
|
-
dragHandle.draggable = true;
|
|
62721
|
-
dragHandle.contentEditable = "false";
|
|
62722
|
-
dragHandle.dataset.dragHandle = "";
|
|
62723
|
-
const textElement = document.createElement("span");
|
|
62724
|
-
textElement.textContent = "Structured content";
|
|
62725
|
-
dragHandle.append(textElement);
|
|
62726
|
-
return dragHandle;
|
|
62727
|
-
}
|
|
62728
|
-
onDragStart(event) {
|
|
62729
|
-
const { view } = this.editor;
|
|
62730
|
-
const target = event.target;
|
|
62731
|
-
const dragHandle = target.nodeType === 3 ? target.parentElement?.closest("[data-drag-handle]") : target.closest("[data-drag-handle]");
|
|
62732
|
-
if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
|
|
62733
|
-
return;
|
|
62734
|
-
}
|
|
62735
|
-
let x = 0;
|
|
62736
|
-
let y2 = 0;
|
|
62737
|
-
if (this.dom !== dragHandle) {
|
|
62738
|
-
const domBox = this.dom.getBoundingClientRect();
|
|
62739
|
-
const handleBox = dragHandle.getBoundingClientRect();
|
|
62740
|
-
const offsetX = event.offsetX ?? event.nativeEvent?.offsetX;
|
|
62741
|
-
const offsetY = event.offsetY ?? event.nativeEvent?.offsetY;
|
|
62742
|
-
x = handleBox.x - domBox.x + offsetX;
|
|
62743
|
-
y2 = handleBox.y - domBox.y + offsetY;
|
|
62744
|
-
}
|
|
62745
|
-
event.dataTransfer?.setDragImage(this.dom, x, y2);
|
|
62746
|
-
const pos = this.getPos();
|
|
62747
|
-
if (typeof pos !== "number") {
|
|
62748
|
-
return;
|
|
62749
|
-
}
|
|
62750
|
-
const selection = NodeSelection.create(view.state.doc, pos);
|
|
62751
|
-
const transaction = view.state.tr.setSelection(selection);
|
|
62752
|
-
view.dispatch(transaction);
|
|
62753
|
-
}
|
|
62754
|
-
}
|
|
62755
|
-
class StructuredContentInlineView extends StructuredContentViewBase {
|
|
62756
|
-
constructor(props) {
|
|
62757
|
-
super(props);
|
|
62758
|
-
}
|
|
62759
|
-
mount() {
|
|
62760
|
-
this.buildView();
|
|
62761
|
-
}
|
|
62762
|
-
get contentDOM() {
|
|
62763
|
-
const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
|
|
62764
|
-
return contentElement || null;
|
|
62765
|
-
}
|
|
62766
|
-
createElement() {
|
|
62767
|
-
const element = document.createElement("span");
|
|
62768
|
-
element.classList.add(structuredContentClass$1);
|
|
62769
|
-
element.setAttribute("data-structured-content", "");
|
|
62770
|
-
const contentElement = document.createElement("span");
|
|
62771
|
-
contentElement.classList.add(structuredContentInnerClass$1);
|
|
62772
|
-
element.append(contentElement);
|
|
62773
|
-
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
62774
|
-
updateDOMAttributes(element, { ...domAttrs });
|
|
62775
|
-
return { element, contentElement };
|
|
62776
|
-
}
|
|
62777
|
-
buildView() {
|
|
62778
|
-
const { element } = this.createElement();
|
|
62779
|
-
const dragHandle = this.createDragHandle();
|
|
62780
|
-
element.prepend(dragHandle);
|
|
62781
|
-
element.addEventListener("dragstart", (e) => this.onDragStart(e));
|
|
62782
|
-
this.root = element;
|
|
62783
|
-
}
|
|
62784
|
-
updateView() {
|
|
62785
|
-
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
62786
|
-
updateDOMAttributes(this.dom, { ...domAttrs });
|
|
62787
|
-
}
|
|
62788
|
-
update(node, decorations, innerDecorations) {
|
|
62789
|
-
const result = super.update(node, decorations, innerDecorations);
|
|
62790
|
-
if (!result) return false;
|
|
62791
|
-
this.updateView();
|
|
62792
|
-
return true;
|
|
62793
|
-
}
|
|
62794
|
-
}
|
|
62795
|
-
const structuredContentClass$1 = "sd-structured-content";
|
|
62796
|
-
const structuredContentInnerClass$1 = "sd-structured-content__content";
|
|
62797
|
-
const StructuredContent = Node$1.create({
|
|
62798
|
-
name: "structuredContent",
|
|
62799
|
-
group: "inline structuredContent",
|
|
63213
|
+
const TotalPageCount = Node$1.create({
|
|
63214
|
+
name: "total-page-number",
|
|
63215
|
+
group: "inline",
|
|
62800
63216
|
inline: true,
|
|
62801
|
-
|
|
62802
|
-
|
|
62803
|
-
|
|
62804
|
-
|
|
62805
|
-
draggable: true,
|
|
63217
|
+
atom: true,
|
|
63218
|
+
draggable: false,
|
|
63219
|
+
selectable: false,
|
|
63220
|
+
content: "text*",
|
|
62806
63221
|
addOptions() {
|
|
62807
63222
|
return {
|
|
62808
63223
|
htmlAttributes: {
|
|
62809
|
-
|
|
62810
|
-
"
|
|
63224
|
+
contenteditable: false,
|
|
63225
|
+
"data-id": "auto-total-pages",
|
|
63226
|
+
"aria-label": "Total page count node",
|
|
63227
|
+
class: "sd-editor-auto-total-pages"
|
|
62811
63228
|
}
|
|
62812
63229
|
};
|
|
62813
63230
|
},
|
|
62814
63231
|
addAttributes() {
|
|
62815
63232
|
return {
|
|
62816
|
-
|
|
63233
|
+
marksAsAttrs: {
|
|
62817
63234
|
default: null,
|
|
62818
|
-
parseDOM: (elem) => elem.getAttribute("data-id"),
|
|
62819
|
-
renderDOM: (attrs) => {
|
|
62820
|
-
if (!attrs.id) return {};
|
|
62821
|
-
return { "data-id": attrs.id };
|
|
62822
|
-
}
|
|
62823
|
-
},
|
|
62824
|
-
sdtPr: {
|
|
62825
63235
|
rendered: false
|
|
62826
63236
|
}
|
|
62827
63237
|
};
|
|
62828
63238
|
},
|
|
63239
|
+
addNodeView() {
|
|
63240
|
+
return ({ node, editor, getPos, decorations }) => {
|
|
63241
|
+
const htmlAttributes = this.options.htmlAttributes;
|
|
63242
|
+
return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
|
|
63243
|
+
};
|
|
63244
|
+
},
|
|
62829
63245
|
parseDOM() {
|
|
62830
|
-
return [{ tag:
|
|
63246
|
+
return [{ tag: 'span[data-id="auto-total-pages"' }];
|
|
62831
63247
|
},
|
|
62832
63248
|
renderDOM({ htmlAttributes }) {
|
|
62833
|
-
return [
|
|
62834
|
-
"span",
|
|
62835
|
-
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
|
|
62836
|
-
"data-structured-content": ""
|
|
62837
|
-
}),
|
|
62838
|
-
0
|
|
62839
|
-
];
|
|
63249
|
+
return ["span", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
|
|
62840
63250
|
},
|
|
62841
|
-
|
|
62842
|
-
return
|
|
62843
|
-
|
|
63251
|
+
addCommands() {
|
|
63252
|
+
return {
|
|
63253
|
+
/**
|
|
63254
|
+
* Insert total page count
|
|
63255
|
+
* @category Command
|
|
63256
|
+
* @returns {Function} Command function
|
|
63257
|
+
* @example
|
|
63258
|
+
* editor.commands.addTotalPageCount()
|
|
63259
|
+
* @note Only works in header/footer contexts
|
|
63260
|
+
*/
|
|
63261
|
+
addTotalPageCount: () => ({ tr, dispatch, state: state2, editor }) => {
|
|
63262
|
+
const { options } = editor;
|
|
63263
|
+
if (!options.isHeaderOrFooter) return false;
|
|
63264
|
+
const { schema } = state2;
|
|
63265
|
+
const pageNumberType = schema.nodes?.["total-page-number"];
|
|
63266
|
+
if (!pageNumberType) return false;
|
|
63267
|
+
const currentPages = editor?.options?.parentEditor?.currentTotalPages || 1;
|
|
63268
|
+
const pageNumberNode = {
|
|
63269
|
+
type: "total-page-number",
|
|
63270
|
+
content: [{ type: "text", text: String(currentPages) }]
|
|
63271
|
+
};
|
|
63272
|
+
const pageNode = schema.nodeFromJSON(pageNumberNode);
|
|
63273
|
+
if (dispatch) {
|
|
63274
|
+
tr.replaceSelectionWith(pageNode, false);
|
|
63275
|
+
}
|
|
63276
|
+
return true;
|
|
63277
|
+
}
|
|
63278
|
+
};
|
|
63279
|
+
},
|
|
63280
|
+
addShortcuts() {
|
|
63281
|
+
return {
|
|
63282
|
+
"Mod-Shift-alt-c": () => this.editor.commands.addTotalPageCount()
|
|
62844
63283
|
};
|
|
62845
63284
|
}
|
|
62846
63285
|
});
|
|
62847
|
-
|
|
62848
|
-
|
|
62849
|
-
|
|
62850
|
-
|
|
62851
|
-
|
|
62852
|
-
|
|
62853
|
-
|
|
62854
|
-
|
|
62855
|
-
|
|
62856
|
-
|
|
62857
|
-
|
|
62858
|
-
|
|
62859
|
-
|
|
62860
|
-
|
|
62861
|
-
|
|
62862
|
-
|
|
62863
|
-
|
|
62864
|
-
|
|
62865
|
-
const domAttrs = Attribute2.mergeAttributes(this.htmlAttributes);
|
|
62866
|
-
updateDOMAttributes(element, { ...domAttrs });
|
|
62867
|
-
return { element, contentElement };
|
|
62868
|
-
}
|
|
62869
|
-
buildView() {
|
|
62870
|
-
const { element } = this.createElement();
|
|
62871
|
-
const dragHandle = this.createDragHandle();
|
|
62872
|
-
element.prepend(dragHandle);
|
|
62873
|
-
element.addEventListener("dragstart", (e) => this.onDragStart(e));
|
|
62874
|
-
this.root = element;
|
|
63286
|
+
const getNodeAttributes = (nodeName, editor) => {
|
|
63287
|
+
switch (nodeName) {
|
|
63288
|
+
case "page-number":
|
|
63289
|
+
return {
|
|
63290
|
+
text: editor.options.currentPageNumber || "1",
|
|
63291
|
+
className: "sd-editor-auto-page-number",
|
|
63292
|
+
dataId: "auto-page-number",
|
|
63293
|
+
ariaLabel: "Page number node"
|
|
63294
|
+
};
|
|
63295
|
+
case "total-page-number":
|
|
63296
|
+
return {
|
|
63297
|
+
text: editor.options.parentEditor?.currentTotalPages || "1",
|
|
63298
|
+
className: "sd-editor-auto-total-pages",
|
|
63299
|
+
dataId: "auto-total-pages",
|
|
63300
|
+
ariaLabel: "Total page count node"
|
|
63301
|
+
};
|
|
63302
|
+
default:
|
|
63303
|
+
return {};
|
|
62875
63304
|
}
|
|
62876
|
-
|
|
62877
|
-
|
|
62878
|
-
|
|
63305
|
+
};
|
|
63306
|
+
class AutoPageNumberNodeView {
|
|
63307
|
+
constructor(node, getPos, decorations, editor, htmlAttributes = {}) {
|
|
63308
|
+
__privateAdd$1(this, _AutoPageNumberNodeView_instances);
|
|
63309
|
+
this.node = node;
|
|
63310
|
+
this.editor = editor;
|
|
63311
|
+
this.view = editor.view;
|
|
63312
|
+
this.getPos = getPos;
|
|
63313
|
+
this.editor = editor;
|
|
63314
|
+
this.dom = __privateMethod$1(this, _AutoPageNumberNodeView_instances, renderDom_fn).call(this, node, htmlAttributes);
|
|
62879
63315
|
}
|
|
62880
|
-
update(node
|
|
62881
|
-
const
|
|
62882
|
-
|
|
62883
|
-
|
|
63316
|
+
update(node) {
|
|
63317
|
+
const incomingType = node?.type?.name;
|
|
63318
|
+
const currentType = this.node?.type?.name;
|
|
63319
|
+
if (!incomingType || incomingType !== currentType) return false;
|
|
63320
|
+
this.node = node;
|
|
62884
63321
|
return true;
|
|
62885
63322
|
}
|
|
62886
63323
|
}
|
|
62887
|
-
|
|
62888
|
-
|
|
62889
|
-
const
|
|
62890
|
-
|
|
62891
|
-
|
|
62892
|
-
|
|
63324
|
+
_AutoPageNumberNodeView_instances = /* @__PURE__ */ new WeakSet();
|
|
63325
|
+
renderDom_fn = function(node, htmlAttributes) {
|
|
63326
|
+
const attrs = getNodeAttributes(this.node.type.name, this.editor);
|
|
63327
|
+
const content = document.createTextNode(String(attrs.text));
|
|
63328
|
+
const nodeContent = document.createElement("span");
|
|
63329
|
+
nodeContent.className = attrs.className;
|
|
63330
|
+
nodeContent.setAttribute("data-id", attrs.dataId);
|
|
63331
|
+
nodeContent.setAttribute("aria-label", attrs.ariaLabel);
|
|
63332
|
+
const currentPos = this.getPos();
|
|
63333
|
+
const { styles, marks } = getMarksFromNeighbors(currentPos, this.view);
|
|
63334
|
+
__privateMethod$1(this, _AutoPageNumberNodeView_instances, scheduleUpdateNodeStyle_fn).call(this, currentPos, marks);
|
|
63335
|
+
Object.assign(nodeContent.style, styles);
|
|
63336
|
+
nodeContent.appendChild(content);
|
|
63337
|
+
Object.entries(htmlAttributes).forEach(([key2, value]) => {
|
|
63338
|
+
if (value) nodeContent.setAttribute(key2, value);
|
|
63339
|
+
});
|
|
63340
|
+
return nodeContent;
|
|
63341
|
+
};
|
|
63342
|
+
scheduleUpdateNodeStyle_fn = function(pos, marks) {
|
|
63343
|
+
setTimeout(() => {
|
|
63344
|
+
const { state: state2 } = this.editor;
|
|
63345
|
+
const { dispatch } = this.view;
|
|
63346
|
+
const node = state2.doc.nodeAt(pos);
|
|
63347
|
+
if (!node || node.isText) return;
|
|
63348
|
+
const currentMarks = node.attrs.marksAsAttrs || [];
|
|
63349
|
+
const newMarks = marks.map((m2) => ({ type: m2.type.name, attrs: m2.attrs }));
|
|
63350
|
+
const isEqual = JSON.stringify(currentMarks) === JSON.stringify(newMarks);
|
|
63351
|
+
if (isEqual) return;
|
|
63352
|
+
const newAttrs = {
|
|
63353
|
+
...node.attrs,
|
|
63354
|
+
marksAsAttrs: newMarks
|
|
63355
|
+
};
|
|
63356
|
+
const tr = state2.tr.setNodeMarkup(pos, void 0, newAttrs);
|
|
63357
|
+
dispatch(tr);
|
|
63358
|
+
}, 0);
|
|
63359
|
+
};
|
|
63360
|
+
const getMarksFromNeighbors = (currentPos, view) => {
|
|
63361
|
+
const $pos = view.state.doc.resolve(currentPos);
|
|
63362
|
+
const styles = {};
|
|
63363
|
+
const marks = [];
|
|
63364
|
+
const before = $pos.nodeBefore;
|
|
63365
|
+
if (before) {
|
|
63366
|
+
Object.assign(styles, processMarks(before.marks));
|
|
63367
|
+
marks.push(...before.marks);
|
|
63368
|
+
}
|
|
63369
|
+
const after = $pos.nodeAfter;
|
|
63370
|
+
if (after) {
|
|
63371
|
+
Object.assign(styles, { ...styles, ...processMarks(after.marks) });
|
|
63372
|
+
marks.push(...after.marks);
|
|
63373
|
+
}
|
|
63374
|
+
return {
|
|
63375
|
+
styles,
|
|
63376
|
+
marks
|
|
63377
|
+
};
|
|
63378
|
+
};
|
|
63379
|
+
const processMarks = (marks) => {
|
|
63380
|
+
const styles = {};
|
|
63381
|
+
marks.forEach((mark) => {
|
|
63382
|
+
const { type: type2, attrs } = mark;
|
|
63383
|
+
switch (type2.name) {
|
|
63384
|
+
case "textStyle":
|
|
63385
|
+
if (attrs.fontFamily) styles["font-family"] = attrs.fontFamily;
|
|
63386
|
+
if (attrs.fontSize) styles["font-size"] = attrs.fontSize;
|
|
63387
|
+
if (attrs.color) styles["color"] = attrs.color;
|
|
63388
|
+
if (attrs.backgroundColor) styles["background-color"] = attrs.backgroundColor;
|
|
63389
|
+
break;
|
|
63390
|
+
case "bold":
|
|
63391
|
+
styles["font-weight"] = "bold";
|
|
63392
|
+
break;
|
|
63393
|
+
case "italic":
|
|
63394
|
+
styles["font-style"] = "italic";
|
|
63395
|
+
break;
|
|
63396
|
+
case "underline":
|
|
63397
|
+
styles["text-decoration"] = (styles["text-decoration"] || "") + " underline";
|
|
63398
|
+
break;
|
|
63399
|
+
case "strike":
|
|
63400
|
+
styles["text-decoration"] = (styles["text-decoration"] || "") + " line-through";
|
|
63401
|
+
break;
|
|
63402
|
+
default:
|
|
63403
|
+
if (attrs?.style) {
|
|
63404
|
+
Object.entries(attrs.style).forEach(([key2, value]) => {
|
|
63405
|
+
styles[key2] = value;
|
|
63406
|
+
});
|
|
63407
|
+
}
|
|
63408
|
+
break;
|
|
63409
|
+
}
|
|
63410
|
+
});
|
|
63411
|
+
return styles;
|
|
63412
|
+
};
|
|
63413
|
+
const ShapeContainer = Node$1.create({
|
|
63414
|
+
name: "shapeContainer",
|
|
63415
|
+
group: "block",
|
|
63416
|
+
content: "block+",
|
|
62893
63417
|
isolating: true,
|
|
62894
|
-
atom: false,
|
|
62895
|
-
// false - has editable content.
|
|
62896
|
-
draggable: true,
|
|
62897
63418
|
addOptions() {
|
|
62898
63419
|
return {
|
|
62899
63420
|
htmlAttributes: {
|
|
62900
|
-
class:
|
|
62901
|
-
"aria-label": "
|
|
63421
|
+
class: "sd-editor-shape-container",
|
|
63422
|
+
"aria-label": "Shape container node"
|
|
62902
63423
|
}
|
|
62903
63424
|
};
|
|
62904
63425
|
},
|
|
62905
63426
|
addAttributes() {
|
|
62906
63427
|
return {
|
|
62907
|
-
|
|
63428
|
+
fillcolor: {
|
|
63429
|
+
renderDOM: (attrs) => {
|
|
63430
|
+
if (!attrs.fillcolor) return {};
|
|
63431
|
+
return {
|
|
63432
|
+
style: `background-color: ${attrs.fillcolor}`
|
|
63433
|
+
};
|
|
63434
|
+
}
|
|
63435
|
+
},
|
|
63436
|
+
sdBlockId: {
|
|
62908
63437
|
default: null,
|
|
62909
|
-
|
|
63438
|
+
keepOnSplit: false,
|
|
63439
|
+
parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
|
|
62910
63440
|
renderDOM: (attrs) => {
|
|
62911
|
-
|
|
62912
|
-
return { "data-id": attrs.id };
|
|
63441
|
+
return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
|
|
62913
63442
|
}
|
|
62914
63443
|
},
|
|
62915
|
-
|
|
63444
|
+
style: {
|
|
63445
|
+
renderDOM: (attrs) => {
|
|
63446
|
+
if (!attrs.style) return {};
|
|
63447
|
+
return {
|
|
63448
|
+
style: attrs.style
|
|
63449
|
+
};
|
|
63450
|
+
}
|
|
63451
|
+
},
|
|
63452
|
+
wrapAttributes: {
|
|
63453
|
+
rendered: false
|
|
63454
|
+
},
|
|
63455
|
+
attributes: {
|
|
62916
63456
|
rendered: false
|
|
62917
63457
|
}
|
|
62918
63458
|
};
|
|
62919
63459
|
},
|
|
62920
63460
|
parseDOM() {
|
|
62921
|
-
return [
|
|
63461
|
+
return [
|
|
63462
|
+
{
|
|
63463
|
+
tag: `div[data-type="${this.name}"]`
|
|
63464
|
+
}
|
|
63465
|
+
];
|
|
62922
63466
|
},
|
|
62923
63467
|
renderDOM({ htmlAttributes }) {
|
|
62924
63468
|
return [
|
|
62925
63469
|
"div",
|
|
62926
|
-
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
|
|
62927
|
-
"data-structured-content-block": ""
|
|
62928
|
-
}),
|
|
63470
|
+
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
|
|
62929
63471
|
0
|
|
62930
63472
|
];
|
|
62931
|
-
},
|
|
62932
|
-
addNodeView() {
|
|
62933
|
-
return (props) => {
|
|
62934
|
-
return new StructuredContentBlockView({ ...props });
|
|
62935
|
-
};
|
|
62936
63473
|
}
|
|
62937
63474
|
});
|
|
62938
|
-
|
|
62939
|
-
|
|
62940
|
-
__privateAdd$1(this, _DocumentSectionView_instances);
|
|
62941
|
-
this.node = node;
|
|
62942
|
-
this.editor = editor;
|
|
62943
|
-
this.decorations = decorations;
|
|
62944
|
-
this.view = editor.view;
|
|
62945
|
-
this.getPos = getPos;
|
|
62946
|
-
__privateMethod$1(this, _DocumentSectionView_instances, init_fn3).call(this);
|
|
62947
|
-
}
|
|
62948
|
-
}
|
|
62949
|
-
_DocumentSectionView_instances = /* @__PURE__ */ new WeakSet();
|
|
62950
|
-
init_fn3 = function() {
|
|
62951
|
-
const { attrs } = this.node;
|
|
62952
|
-
const { id, title, description } = attrs;
|
|
62953
|
-
this.dom = document.createElement("div");
|
|
62954
|
-
this.dom.className = "sd-document-section-block";
|
|
62955
|
-
this.dom.setAttribute("data-id", id);
|
|
62956
|
-
this.dom.setAttribute("data-title", title);
|
|
62957
|
-
this.dom.setAttribute("data-description", description);
|
|
62958
|
-
this.dom.setAttribute("aria-label", "Document section");
|
|
62959
|
-
__privateMethod$1(this, _DocumentSectionView_instances, addToolTip_fn).call(this);
|
|
62960
|
-
this.contentDOM = document.createElement("div");
|
|
62961
|
-
this.contentDOM.className = "sd-document-section-block-content";
|
|
62962
|
-
this.contentDOM.setAttribute("contenteditable", "true");
|
|
62963
|
-
this.dom.appendChild(this.contentDOM);
|
|
62964
|
-
};
|
|
62965
|
-
addToolTip_fn = function() {
|
|
62966
|
-
const { title } = this.node.attrs;
|
|
62967
|
-
this.infoDiv = document.createElement("div");
|
|
62968
|
-
this.infoDiv.className = "sd-document-section-block-info";
|
|
62969
|
-
const textSpan = document.createElement("span");
|
|
62970
|
-
textSpan.textContent = title || "Document section";
|
|
62971
|
-
this.infoDiv.appendChild(textSpan);
|
|
62972
|
-
this.infoDiv.setAttribute("contenteditable", "false");
|
|
62973
|
-
this.dom.appendChild(this.infoDiv);
|
|
62974
|
-
};
|
|
62975
|
-
const getAllSections = (editor) => {
|
|
62976
|
-
if (!editor) return [];
|
|
62977
|
-
const type2 = editor.schema.nodes.documentSection;
|
|
62978
|
-
if (!type2) return [];
|
|
62979
|
-
const sections = [];
|
|
62980
|
-
const { state: state2 } = editor;
|
|
62981
|
-
state2.doc.descendants((node, pos) => {
|
|
62982
|
-
if (node.type.name === type2.name) {
|
|
62983
|
-
sections.push({ node, pos });
|
|
62984
|
-
}
|
|
62985
|
-
});
|
|
62986
|
-
return sections;
|
|
62987
|
-
};
|
|
62988
|
-
const exportSectionsToHTML = (editor) => {
|
|
62989
|
-
const sections = getAllSections(editor);
|
|
62990
|
-
const processedSections = /* @__PURE__ */ new Set();
|
|
62991
|
-
const result = [];
|
|
62992
|
-
sections.forEach(({ node }) => {
|
|
62993
|
-
const { attrs } = node;
|
|
62994
|
-
const { id, title, description } = attrs;
|
|
62995
|
-
if (processedSections.has(id)) return;
|
|
62996
|
-
processedSections.add(id);
|
|
62997
|
-
const html = getHTMLFromNode(node, editor);
|
|
62998
|
-
result.push({
|
|
62999
|
-
id,
|
|
63000
|
-
title,
|
|
63001
|
-
description,
|
|
63002
|
-
html
|
|
63003
|
-
});
|
|
63004
|
-
});
|
|
63005
|
-
return result;
|
|
63006
|
-
};
|
|
63007
|
-
const getHTMLFromNode = (node, editor) => {
|
|
63008
|
-
const tempDocument = document.implementation.createHTMLDocument();
|
|
63009
|
-
const container = tempDocument.createElement("div");
|
|
63010
|
-
const fragment = DOMSerializer.fromSchema(editor.schema).serializeFragment(node.content);
|
|
63011
|
-
container.appendChild(fragment);
|
|
63012
|
-
let html = container.innerHTML;
|
|
63013
|
-
return html;
|
|
63014
|
-
};
|
|
63015
|
-
const exportSectionsToJSON = (editor) => {
|
|
63016
|
-
const sections = getAllSections(editor);
|
|
63017
|
-
const processedSections = /* @__PURE__ */ new Set();
|
|
63018
|
-
const result = [];
|
|
63019
|
-
sections.forEach(({ node }) => {
|
|
63020
|
-
const { attrs } = node;
|
|
63021
|
-
const { id, title, description } = attrs;
|
|
63022
|
-
if (processedSections.has(id)) return;
|
|
63023
|
-
processedSections.add(id);
|
|
63024
|
-
result.push({
|
|
63025
|
-
id,
|
|
63026
|
-
title,
|
|
63027
|
-
description,
|
|
63028
|
-
content: node.toJSON()
|
|
63029
|
-
});
|
|
63030
|
-
});
|
|
63031
|
-
return result;
|
|
63032
|
-
};
|
|
63033
|
-
const getLinkedSectionEditor = (id, options, editor) => {
|
|
63034
|
-
const sections = getAllSections(editor);
|
|
63035
|
-
const section = sections.find((s) => s.node.attrs.id === id);
|
|
63036
|
-
if (!section) return null;
|
|
63037
|
-
const child = editor.createChildEditor({
|
|
63038
|
-
...options,
|
|
63039
|
-
onUpdate: ({ editor: childEditor, transaction }) => {
|
|
63040
|
-
const isFromtLinkedParent = transaction.getMeta("fromLinkedParent");
|
|
63041
|
-
if (isFromtLinkedParent) return;
|
|
63042
|
-
const updatedContent = childEditor.state.doc.content;
|
|
63043
|
-
const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
|
|
63044
|
-
if (!sectionNode) return;
|
|
63045
|
-
const { pos, node } = sectionNode;
|
|
63046
|
-
const newNode = node.type.create(node.attrs, updatedContent, node.marks);
|
|
63047
|
-
const tr = editor.state.tr.replaceWith(pos, pos + node.nodeSize, newNode);
|
|
63048
|
-
tr.setMeta("fromLinkedChild", true);
|
|
63049
|
-
editor.view.dispatch(tr);
|
|
63050
|
-
}
|
|
63051
|
-
});
|
|
63052
|
-
editor.on("update", ({ transaction }) => {
|
|
63053
|
-
const isFromLinkedChild = transaction.getMeta("fromLinkedChild");
|
|
63054
|
-
if (isFromLinkedChild) return;
|
|
63055
|
-
const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
|
|
63056
|
-
if (!sectionNode) return;
|
|
63057
|
-
const sectionContent = sectionNode.node.content;
|
|
63058
|
-
const json = {
|
|
63059
|
-
type: "doc",
|
|
63060
|
-
content: sectionContent.content.map((node) => node.toJSON())
|
|
63061
|
-
};
|
|
63062
|
-
const childTr = child.state.tr;
|
|
63063
|
-
childTr.setMeta("fromLinkedParent", true);
|
|
63064
|
-
childTr.replaceWith(0, child.state.doc.content.size, child.schema.nodeFromJSON(json));
|
|
63065
|
-
child.view.dispatch(childTr);
|
|
63066
|
-
});
|
|
63067
|
-
return child;
|
|
63068
|
-
};
|
|
63069
|
-
const SectionHelpers = {
|
|
63070
|
-
getAllSections,
|
|
63071
|
-
exportSectionsToHTML,
|
|
63072
|
-
exportSectionsToJSON,
|
|
63073
|
-
getLinkedSectionEditor
|
|
63074
|
-
};
|
|
63075
|
-
const DocumentSection = Node$1.create({
|
|
63076
|
-
name: "documentSection",
|
|
63475
|
+
const ShapeTextbox = Node$1.create({
|
|
63476
|
+
name: "shapeTextbox",
|
|
63077
63477
|
group: "block",
|
|
63078
|
-
content: "block*",
|
|
63079
|
-
atom: true,
|
|
63478
|
+
content: "paragraph* block*",
|
|
63080
63479
|
isolating: true,
|
|
63081
63480
|
addOptions() {
|
|
63082
63481
|
return {
|
|
63083
63482
|
htmlAttributes: {
|
|
63084
|
-
class: "sd-
|
|
63085
|
-
"aria-label": "
|
|
63483
|
+
class: "sd-editor-shape-textbox",
|
|
63484
|
+
"aria-label": "Shape textbox node"
|
|
63086
63485
|
}
|
|
63087
63486
|
};
|
|
63088
63487
|
},
|
|
63089
|
-
parseDOM() {
|
|
63090
|
-
return [
|
|
63091
|
-
{
|
|
63092
|
-
tag: "div.sd-document-section-block",
|
|
63093
|
-
priority: 60
|
|
63094
|
-
}
|
|
63095
|
-
];
|
|
63096
|
-
},
|
|
63097
|
-
renderDOM({ htmlAttributes }) {
|
|
63098
|
-
return ["div", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
|
|
63099
|
-
},
|
|
63100
63488
|
addAttributes() {
|
|
63101
63489
|
return {
|
|
63102
|
-
id: {},
|
|
63103
63490
|
sdBlockId: {
|
|
63104
63491
|
default: null,
|
|
63105
63492
|
keepOnSplit: false,
|
|
@@ -63108,212 +63495,131 @@ const DocumentSection = Node$1.create({
|
|
|
63108
63495
|
return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
|
|
63109
63496
|
}
|
|
63110
63497
|
},
|
|
63111
|
-
|
|
63112
|
-
|
|
63113
|
-
|
|
63114
|
-
isLocked: { default: false }
|
|
63498
|
+
attributes: {
|
|
63499
|
+
rendered: false
|
|
63500
|
+
}
|
|
63115
63501
|
};
|
|
63116
63502
|
},
|
|
63117
|
-
|
|
63118
|
-
return
|
|
63119
|
-
|
|
63503
|
+
parseDOM() {
|
|
63504
|
+
return [
|
|
63505
|
+
{
|
|
63506
|
+
tag: `div[data-type="${this.name}"]`
|
|
63507
|
+
}
|
|
63508
|
+
];
|
|
63509
|
+
},
|
|
63510
|
+
renderDOM({ htmlAttributes }) {
|
|
63511
|
+
return [
|
|
63512
|
+
"div",
|
|
63513
|
+
Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
|
|
63514
|
+
0
|
|
63515
|
+
];
|
|
63516
|
+
}
|
|
63517
|
+
});
|
|
63518
|
+
const ContentBlock = Node$1.create({
|
|
63519
|
+
name: "contentBlock",
|
|
63520
|
+
group: "inline",
|
|
63521
|
+
content: "",
|
|
63522
|
+
isolating: true,
|
|
63523
|
+
atom: true,
|
|
63524
|
+
inline: true,
|
|
63525
|
+
addOptions() {
|
|
63526
|
+
return {
|
|
63527
|
+
htmlAttributes: {
|
|
63528
|
+
contenteditable: false
|
|
63529
|
+
}
|
|
63120
63530
|
};
|
|
63121
63531
|
},
|
|
63122
|
-
|
|
63532
|
+
addAttributes() {
|
|
63123
63533
|
return {
|
|
63124
|
-
|
|
63125
|
-
|
|
63126
|
-
|
|
63127
|
-
|
|
63128
|
-
|
|
63129
|
-
* editor.commands.createDocumentSection({
|
|
63130
|
-
* id: 1,
|
|
63131
|
-
* title: 'Terms & Conditions',
|
|
63132
|
-
* isLocked: true,
|
|
63133
|
-
* html: '<p>Legal content...</p>'
|
|
63134
|
-
* })
|
|
63135
|
-
*/
|
|
63136
|
-
createDocumentSection: (options = {}) => ({ tr, state: state2, dispatch, editor }) => {
|
|
63137
|
-
const { selection } = state2;
|
|
63138
|
-
let { from: from2, to } = selection;
|
|
63139
|
-
let content = selection.content().content;
|
|
63140
|
-
const { html: optionsHTML, json: optionsJSON } = options;
|
|
63141
|
-
if (optionsHTML) {
|
|
63142
|
-
const html = htmlHandler(optionsHTML, this.editor);
|
|
63143
|
-
const doc2 = DOMParser$1.fromSchema(this.editor.schema).parse(html);
|
|
63144
|
-
content = doc2.content;
|
|
63145
|
-
}
|
|
63146
|
-
if (optionsJSON) {
|
|
63147
|
-
content = this.editor.schema.nodeFromJSON(optionsJSON);
|
|
63148
|
-
}
|
|
63149
|
-
if (!content?.content?.length) {
|
|
63150
|
-
content = this.editor.schema.nodeFromJSON({ type: "paragraph", content: [] });
|
|
63151
|
-
}
|
|
63152
|
-
if (!options.id) {
|
|
63153
|
-
const allSections = SectionHelpers.getAllSections(editor);
|
|
63154
|
-
options.id = allSections.length + 1;
|
|
63155
|
-
}
|
|
63156
|
-
if (!options.title) {
|
|
63157
|
-
options.title = "Document section";
|
|
63158
|
-
}
|
|
63159
|
-
const node = this.type.createAndFill(options, content);
|
|
63160
|
-
if (!node) return false;
|
|
63161
|
-
const isAlreadyInSdtBlock = findParentNode((node2) => node2.type.name === "documentSection")(selection);
|
|
63162
|
-
if (isAlreadyInSdtBlock && isAlreadyInSdtBlock.node) {
|
|
63163
|
-
const insertPos2 = isAlreadyInSdtBlock.pos + isAlreadyInSdtBlock.node.nodeSize;
|
|
63164
|
-
from2 = insertPos2;
|
|
63165
|
-
to = insertPos2;
|
|
63166
|
-
}
|
|
63167
|
-
tr.replaceRangeWith(from2, to, node);
|
|
63168
|
-
const nodeEnd = from2 + node.nodeSize;
|
|
63169
|
-
let shouldInsertParagraph = true;
|
|
63170
|
-
let insertPos = nodeEnd;
|
|
63171
|
-
if (nodeEnd >= tr.doc.content.size) {
|
|
63172
|
-
insertPos = tr.doc.content.size;
|
|
63173
|
-
if (insertPos > 0) {
|
|
63174
|
-
const $endPos = tr.doc.resolve(insertPos);
|
|
63175
|
-
if ($endPos.nodeBefore && $endPos.nodeBefore.type.name === "paragraph") {
|
|
63176
|
-
shouldInsertParagraph = false;
|
|
63177
|
-
}
|
|
63178
|
-
}
|
|
63179
|
-
}
|
|
63180
|
-
if (shouldInsertParagraph) {
|
|
63181
|
-
const emptyParagraph = tr.doc.type.schema.nodes.paragraph.create();
|
|
63182
|
-
tr.insert(insertPos, emptyParagraph);
|
|
63183
|
-
}
|
|
63184
|
-
if (dispatch) {
|
|
63185
|
-
tr.setMeta("documentSection", { action: "create" });
|
|
63186
|
-
dispatch(tr);
|
|
63187
|
-
setTimeout(() => {
|
|
63188
|
-
try {
|
|
63189
|
-
const currentState = editor.state;
|
|
63190
|
-
const docSize = currentState.doc.content.size;
|
|
63191
|
-
let targetPos = from2 + node.nodeSize;
|
|
63192
|
-
if (shouldInsertParagraph) {
|
|
63193
|
-
targetPos += 1;
|
|
63194
|
-
}
|
|
63195
|
-
targetPos = Math.min(targetPos, docSize);
|
|
63196
|
-
if (targetPos < docSize && targetPos > 0) {
|
|
63197
|
-
const newSelection = Selection.near(currentState.doc.resolve(targetPos));
|
|
63198
|
-
const newTr = currentState.tr.setSelection(newSelection);
|
|
63199
|
-
editor.view.dispatch(newTr);
|
|
63200
|
-
}
|
|
63201
|
-
} catch (e) {
|
|
63202
|
-
console.warn("Could not set delayed selection:", e);
|
|
63203
|
-
}
|
|
63204
|
-
}, 0);
|
|
63534
|
+
horizontalRule: {
|
|
63535
|
+
default: false,
|
|
63536
|
+
renderDOM: ({ horizontalRule }) => {
|
|
63537
|
+
if (!horizontalRule) return {};
|
|
63538
|
+
return { "data-horizontal-rule": "true" };
|
|
63205
63539
|
}
|
|
63206
|
-
return true;
|
|
63207
63540
|
},
|
|
63208
|
-
|
|
63209
|
-
|
|
63210
|
-
|
|
63211
|
-
|
|
63212
|
-
|
|
63213
|
-
|
|
63214
|
-
|
|
63215
|
-
|
|
63216
|
-
|
|
63217
|
-
|
|
63218
|
-
|
|
63219
|
-
const nodeStart = pos;
|
|
63220
|
-
const nodeEnd = nodeStart + node.nodeSize;
|
|
63221
|
-
const contentToPreserve = node.content;
|
|
63222
|
-
tr.delete(nodeStart, nodeEnd);
|
|
63223
|
-
if (contentToPreserve.size > 0) {
|
|
63224
|
-
tr.insert(nodeStart, contentToPreserve);
|
|
63225
|
-
}
|
|
63226
|
-
const newPos = Math.min(nodeStart, tr.doc.content.size);
|
|
63227
|
-
tr.setSelection(Selection.near(tr.doc.resolve(newPos)));
|
|
63228
|
-
if (dispatch) {
|
|
63229
|
-
tr.setMeta("documentSection", { action: "delete" });
|
|
63230
|
-
dispatch(tr);
|
|
63541
|
+
size: {
|
|
63542
|
+
default: null,
|
|
63543
|
+
renderDOM: ({ size: size2 }) => {
|
|
63544
|
+
if (!size2) return {};
|
|
63545
|
+
let style2 = "";
|
|
63546
|
+
if (size2.top) style2 += `top: ${size2.top}px; `;
|
|
63547
|
+
if (size2.left) style2 += `left: ${size2.left}px; `;
|
|
63548
|
+
if (size2.width) style2 += `width: ${size2.width.toString().endsWith("%") ? size2.width : `${size2.width}px`}; `;
|
|
63549
|
+
if (size2.height)
|
|
63550
|
+
style2 += `height: ${size2.height.toString().endsWith("%") ? size2.height : `${size2.height}px`}; `;
|
|
63551
|
+
return { style: style2 };
|
|
63231
63552
|
}
|
|
63232
|
-
return true;
|
|
63233
63553
|
},
|
|
63234
|
-
|
|
63235
|
-
|
|
63236
|
-
|
|
63237
|
-
|
|
63238
|
-
|
|
63239
|
-
|
|
63240
|
-
|
|
63241
|
-
removeSectionById: (id) => ({ tr, dispatch }) => {
|
|
63242
|
-
const sections = SectionHelpers.getAllSections(this.editor);
|
|
63243
|
-
const sectionToRemove = sections.find(({ node: node2 }) => node2.attrs.id === id);
|
|
63244
|
-
if (!sectionToRemove) return false;
|
|
63245
|
-
const { pos, node } = sectionToRemove;
|
|
63246
|
-
const nodeStart = pos;
|
|
63247
|
-
const nodeEnd = nodeStart + node.nodeSize;
|
|
63248
|
-
tr.delete(nodeStart, nodeEnd);
|
|
63249
|
-
if (dispatch) {
|
|
63250
|
-
tr.setMeta("documentSection", { action: "delete", id });
|
|
63251
|
-
dispatch(tr);
|
|
63554
|
+
background: {
|
|
63555
|
+
default: null,
|
|
63556
|
+
renderDOM: (attrs) => {
|
|
63557
|
+
if (!attrs.background) return {};
|
|
63558
|
+
return {
|
|
63559
|
+
style: `background-color: ${attrs.background}`
|
|
63560
|
+
};
|
|
63252
63561
|
}
|
|
63253
|
-
return true;
|
|
63254
63562
|
},
|
|
63563
|
+
drawingContent: {
|
|
63564
|
+
rendered: false
|
|
63565
|
+
},
|
|
63566
|
+
attributes: {
|
|
63567
|
+
rendered: false
|
|
63568
|
+
}
|
|
63569
|
+
};
|
|
63570
|
+
},
|
|
63571
|
+
parseDOM() {
|
|
63572
|
+
return [
|
|
63573
|
+
{
|
|
63574
|
+
tag: `div[data-type="${this.name}"]`
|
|
63575
|
+
}
|
|
63576
|
+
];
|
|
63577
|
+
},
|
|
63578
|
+
renderDOM({ htmlAttributes }) {
|
|
63579
|
+
return ["div", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
|
|
63580
|
+
},
|
|
63581
|
+
addCommands() {
|
|
63582
|
+
return {
|
|
63255
63583
|
/**
|
|
63256
|
-
*
|
|
63584
|
+
* Insert a horizontal rule
|
|
63257
63585
|
* @category Command
|
|
63258
|
-
* @param {number} id - Section to lock
|
|
63259
63586
|
* @example
|
|
63260
|
-
* editor.commands.
|
|
63587
|
+
* editor.commands.insertHorizontalRule()
|
|
63588
|
+
* @note Creates a visual separator between content sections
|
|
63261
63589
|
*/
|
|
63262
|
-
|
|
63263
|
-
|
|
63264
|
-
|
|
63265
|
-
|
|
63266
|
-
|
|
63267
|
-
|
|
63268
|
-
|
|
63269
|
-
|
|
63270
|
-
}
|
|
63271
|
-
return true;
|
|
63590
|
+
insertHorizontalRule: () => ({ commands: commands2 }) => {
|
|
63591
|
+
return commands2.insertContent({
|
|
63592
|
+
type: this.name,
|
|
63593
|
+
attrs: {
|
|
63594
|
+
horizontalRule: true,
|
|
63595
|
+
size: { width: "100%", height: 2 },
|
|
63596
|
+
background: "#e5e7eb"
|
|
63597
|
+
}
|
|
63598
|
+
});
|
|
63272
63599
|
},
|
|
63273
63600
|
/**
|
|
63274
|
-
*
|
|
63601
|
+
* Insert a content block
|
|
63275
63602
|
* @category Command
|
|
63276
|
-
* @param {
|
|
63603
|
+
* @param {ContentBlockConfig} config - Block configuration
|
|
63277
63604
|
* @example
|
|
63278
|
-
*
|
|
63279
|
-
* editor.commands.
|
|
63280
|
-
*
|
|
63281
|
-
*
|
|
63282
|
-
*
|
|
63283
|
-
*
|
|
63605
|
+
* // Insert a spacer block
|
|
63606
|
+
* editor.commands.insertContentBlock({ size: { height: 20 } })
|
|
63607
|
+
*
|
|
63608
|
+
* @example
|
|
63609
|
+
* // Insert a colored divider
|
|
63610
|
+
* editor.commands.insertContentBlock({
|
|
63611
|
+
* size: { width: '50%', height: 3 },
|
|
63612
|
+
* background: '#3b82f6'
|
|
63284
63613
|
* })
|
|
63614
|
+
* @note Used for spacing, dividers, and special inline content
|
|
63285
63615
|
*/
|
|
63286
|
-
|
|
63287
|
-
|
|
63288
|
-
|
|
63289
|
-
|
|
63290
|
-
|
|
63291
|
-
let newContent = null;
|
|
63292
|
-
if (html) {
|
|
63293
|
-
const htmlDoc = htmlHandler(html, editor || this.editor);
|
|
63294
|
-
const doc2 = DOMParser$1.fromSchema((editor || this.editor).schema).parse(htmlDoc);
|
|
63295
|
-
newContent = doc2.content;
|
|
63296
|
-
}
|
|
63297
|
-
if (json) {
|
|
63298
|
-
newContent = (editor || this.editor).schema.nodeFromJSON(json);
|
|
63299
|
-
}
|
|
63300
|
-
if (!newContent) {
|
|
63301
|
-
newContent = node.content;
|
|
63302
|
-
}
|
|
63303
|
-
const updatedNode = node.type.create({ ...node.attrs, ...attrs }, newContent, node.marks);
|
|
63304
|
-
tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
|
|
63305
|
-
if (dispatch) {
|
|
63306
|
-
tr.setMeta("documentSection", { action: "update", id, attrs });
|
|
63307
|
-
dispatch(tr);
|
|
63308
|
-
}
|
|
63309
|
-
return true;
|
|
63616
|
+
insertContentBlock: (config2) => ({ commands: commands2 }) => {
|
|
63617
|
+
return commands2.insertContent({
|
|
63618
|
+
type: this.name,
|
|
63619
|
+
attrs: config2
|
|
63620
|
+
});
|
|
63310
63621
|
}
|
|
63311
63622
|
};
|
|
63312
|
-
},
|
|
63313
|
-
addHelpers() {
|
|
63314
|
-
return {
|
|
63315
|
-
...SectionHelpers
|
|
63316
|
-
};
|
|
63317
63623
|
}
|
|
63318
63624
|
});
|
|
63319
63625
|
const { findChildren } = helpers;
|
|
@@ -70163,6 +70469,7 @@ const getStarterExtensions = () => {
|
|
|
70163
70469
|
Search,
|
|
70164
70470
|
StructuredContent,
|
|
70165
70471
|
StructuredContentBlock,
|
|
70472
|
+
StructuredContentCommands,
|
|
70166
70473
|
DocumentSection,
|
|
70167
70474
|
NodeResizer,
|
|
70168
70475
|
CustomSelection,
|