@zipify/wysiwyg 1.3.2 → 1.4.0-1
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/cli.js +1 -1
- package/dist/wysiwyg.mjs +34 -21
- package/lib/Wysiwyg.vue +4 -1
- package/lib/extensions/StylePreset.js +38 -22
- package/lib/extensions/__tests__/StylePreset.test.js +48 -0
- package/lib/extensions/__tests__/__snapshots__/StylePreset.test.js.snap +26 -0
- package/package.json +1 -1
package/dist/wysiwyg.mjs
CHANGED
|
@@ -23338,28 +23338,12 @@ const StylePreset = Extension.create({
|
|
|
23338
23338
|
removePreset: createCommand(({ commands: commands2 }) => {
|
|
23339
23339
|
commands2.setNode(NodeTypes.PARAGRAPH, { preset: null });
|
|
23340
23340
|
}),
|
|
23341
|
-
getPresetCustomization: createCommand(({ editor }) => {
|
|
23341
|
+
getPresetCustomization: createCommand(({ editor, commands: commands2 }) => {
|
|
23342
23342
|
const state = toRef(editor, "state");
|
|
23343
23343
|
return computed(() => {
|
|
23344
|
-
const
|
|
23345
|
-
const
|
|
23346
|
-
|
|
23347
|
-
state.value.doc.nodesBetween(from2, to, (node) => {
|
|
23348
|
-
for (const [name, value] of Object.entries(node.attrs)) {
|
|
23349
|
-
const isSetting = TextSettings.attributes.includes(name);
|
|
23350
|
-
if (isSetting && value)
|
|
23351
|
-
attributes.add(name);
|
|
23352
|
-
}
|
|
23353
|
-
for (const { type } of node.marks) {
|
|
23354
|
-
if (TextSettings.marks.includes(type.name)) {
|
|
23355
|
-
marks.add(type.name);
|
|
23356
|
-
}
|
|
23357
|
-
}
|
|
23358
|
-
});
|
|
23359
|
-
return {
|
|
23360
|
-
attributes: Array.from(attributes),
|
|
23361
|
-
marks: Array.from(marks)
|
|
23362
|
-
};
|
|
23344
|
+
const { selection, doc: doc2 } = unref(state);
|
|
23345
|
+
const { from: from2, to } = selection;
|
|
23346
|
+
return commands2._getSettingCustomization(doc2, from2, to);
|
|
23363
23347
|
});
|
|
23364
23348
|
}),
|
|
23365
23349
|
isSettingCustomized: createCommand(({ commands: commands2 }, group, name) => {
|
|
@@ -23369,6 +23353,33 @@ const StylePreset = Extension.create({
|
|
|
23369
23353
|
return (_b = (_a = unref(customization)[group]) == null ? void 0 : _a.includes(name)) != null ? _b : false;
|
|
23370
23354
|
});
|
|
23371
23355
|
}),
|
|
23356
|
+
getContentCustomization: createCommand(({ editor, commands: commands2 }) => {
|
|
23357
|
+
const state = toRef(editor, "state");
|
|
23358
|
+
return computed(() => {
|
|
23359
|
+
const { doc: doc2 } = unref(state);
|
|
23360
|
+
return commands2._getSettingCustomization(doc2, 0, doc2.content.size);
|
|
23361
|
+
});
|
|
23362
|
+
}),
|
|
23363
|
+
_getSettingCustomization: createCommand((_, doc2, from2, to) => {
|
|
23364
|
+
const marks = /* @__PURE__ */ new Set();
|
|
23365
|
+
const attributes = /* @__PURE__ */ new Set();
|
|
23366
|
+
doc2.nodesBetween(from2, to, (node) => {
|
|
23367
|
+
for (const [name, value] of Object.entries(node.attrs)) {
|
|
23368
|
+
const isSetting = TextSettings.attributes.includes(name);
|
|
23369
|
+
if (isSetting && value)
|
|
23370
|
+
attributes.add(name);
|
|
23371
|
+
}
|
|
23372
|
+
for (const { type } of node.marks) {
|
|
23373
|
+
if (TextSettings.marks.includes(type.name)) {
|
|
23374
|
+
marks.add(type.name);
|
|
23375
|
+
}
|
|
23376
|
+
}
|
|
23377
|
+
});
|
|
23378
|
+
return {
|
|
23379
|
+
attributes: Array.from(attributes),
|
|
23380
|
+
marks: Array.from(marks)
|
|
23381
|
+
};
|
|
23382
|
+
}),
|
|
23372
23383
|
removePresetCustomization: createCommand(({ chain }) => {
|
|
23373
23384
|
chain().storeSelection().expandSelectionToBlock().unsetMarks(TextSettings.marks).resetAttributes(NodeTypes.PARAGRAPH, TextSettings.attributes).resetAttributes(NodeTypes.HEADING, TextSettings.attributes).restoreSelection().run();
|
|
23374
23385
|
}),
|
|
@@ -26276,6 +26287,7 @@ const __vue2_script = {
|
|
|
26276
26287
|
listRef: toRef(props, "favoriteColors"),
|
|
26277
26288
|
triggerUpdate: (colors) => emit("update-favorite-colors", colors)
|
|
26278
26289
|
});
|
|
26290
|
+
const getContentCustomization = () => editor.commands.getContentCustomization();
|
|
26279
26291
|
provide(InjectionTokens$1.EDITOR, editor);
|
|
26280
26292
|
provide(InjectionTokens$1.FONTS, fonts);
|
|
26281
26293
|
provide(InjectionTokens$1.FONT_SIZES, fontSizes);
|
|
@@ -26288,7 +26300,8 @@ const __vue2_script = {
|
|
|
26288
26300
|
toolbarRef,
|
|
26289
26301
|
wysiwygRef,
|
|
26290
26302
|
toolbar,
|
|
26291
|
-
updateToolbar
|
|
26303
|
+
updateToolbar,
|
|
26304
|
+
getContentCustomization
|
|
26292
26305
|
};
|
|
26293
26306
|
}
|
|
26294
26307
|
};
|
package/lib/Wysiwyg.vue
CHANGED
|
@@ -193,6 +193,8 @@ export default {
|
|
|
193
193
|
triggerUpdate: (colors) => emit('update-favorite-colors', colors)
|
|
194
194
|
});
|
|
195
195
|
|
|
196
|
+
const getContentCustomization = () => editor.commands.getContentCustomization();
|
|
197
|
+
|
|
196
198
|
provide(InjectionTokens.EDITOR, editor);
|
|
197
199
|
provide(InjectionTokens.FONTS, fonts);
|
|
198
200
|
provide(InjectionTokens.FONT_SIZES, fontSizes);
|
|
@@ -206,7 +208,8 @@ export default {
|
|
|
206
208
|
toolbarRef,
|
|
207
209
|
wysiwygRef,
|
|
208
210
|
toolbar,
|
|
209
|
-
updateToolbar
|
|
211
|
+
updateToolbar,
|
|
212
|
+
getContentCustomization
|
|
210
213
|
};
|
|
211
214
|
}
|
|
212
215
|
};
|
|
@@ -140,32 +140,14 @@ export const StylePreset = Extension.create({
|
|
|
140
140
|
commands.setNode(NodeTypes.PARAGRAPH, { preset: null });
|
|
141
141
|
}),
|
|
142
142
|
|
|
143
|
-
getPresetCustomization: createCommand(({ editor }) => {
|
|
143
|
+
getPresetCustomization: createCommand(({ editor, commands }) => {
|
|
144
144
|
const state = toRef(editor, 'state');
|
|
145
145
|
|
|
146
146
|
return computed(() => {
|
|
147
|
-
const
|
|
148
|
-
const
|
|
149
|
-
const { from, to } = state.value.selection;
|
|
147
|
+
const { selection, doc } = unref(state);
|
|
148
|
+
const { from, to } = selection;
|
|
150
149
|
|
|
151
|
-
|
|
152
|
-
for (const [name, value] of Object.entries(node.attrs)) {
|
|
153
|
-
const isSetting = TextSettings.attributes.includes(name);
|
|
154
|
-
|
|
155
|
-
if (isSetting && value) attributes.add(name);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
for (const { type } of node.marks) {
|
|
159
|
-
if (TextSettings.marks.includes(type.name)) {
|
|
160
|
-
marks.add(type.name);
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
return {
|
|
166
|
-
attributes: Array.from(attributes),
|
|
167
|
-
marks: Array.from(marks)
|
|
168
|
-
};
|
|
150
|
+
return commands._getSettingCustomization(doc, from, to);
|
|
169
151
|
});
|
|
170
152
|
}),
|
|
171
153
|
|
|
@@ -175,6 +157,40 @@ export const StylePreset = Extension.create({
|
|
|
175
157
|
return computed(() => unref(customization)[group]?.includes(name) ?? false);
|
|
176
158
|
}),
|
|
177
159
|
|
|
160
|
+
getContentCustomization: createCommand(({ editor, commands }) => {
|
|
161
|
+
const state = toRef(editor, 'state');
|
|
162
|
+
|
|
163
|
+
return computed(() => {
|
|
164
|
+
const { doc } = unref(state);
|
|
165
|
+
|
|
166
|
+
return commands._getSettingCustomization(doc, 0, doc.content.size);
|
|
167
|
+
});
|
|
168
|
+
}),
|
|
169
|
+
|
|
170
|
+
_getSettingCustomization: createCommand((_, doc, from, to) => {
|
|
171
|
+
const marks = new Set();
|
|
172
|
+
const attributes = new Set();
|
|
173
|
+
|
|
174
|
+
doc.nodesBetween(from, to, (node) => {
|
|
175
|
+
for (const [name, value] of Object.entries(node.attrs)) {
|
|
176
|
+
const isSetting = TextSettings.attributes.includes(name);
|
|
177
|
+
|
|
178
|
+
if (isSetting && value) attributes.add(name);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
for (const { type } of node.marks) {
|
|
182
|
+
if (TextSettings.marks.includes(type.name)) {
|
|
183
|
+
marks.add(type.name);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
return {
|
|
189
|
+
attributes: Array.from(attributes),
|
|
190
|
+
marks: Array.from(marks)
|
|
191
|
+
};
|
|
192
|
+
}),
|
|
193
|
+
|
|
178
194
|
removePresetCustomization: createCommand(({ chain }) => {
|
|
179
195
|
chain()
|
|
180
196
|
.storeSelection()
|
|
@@ -486,6 +486,54 @@ describe('get preset customization', () => {
|
|
|
486
486
|
});
|
|
487
487
|
});
|
|
488
488
|
|
|
489
|
+
describe('get content customization', () => {
|
|
490
|
+
test('should return empty content customization', async () => {
|
|
491
|
+
const editor = await createEditor({
|
|
492
|
+
content: NodeFactory.doc([
|
|
493
|
+
NodeFactory.paragraph({ preset: { id: 'regular-1' } }, 'test')
|
|
494
|
+
]),
|
|
495
|
+
presets: [createPreset({ id: 'regular-1' })]
|
|
496
|
+
});
|
|
497
|
+
const customization = editor.commands.getContentCustomization();
|
|
498
|
+
|
|
499
|
+
expect(customization.value).toMatchSnapshot();
|
|
500
|
+
});
|
|
501
|
+
|
|
502
|
+
test('should find marks', async () => {
|
|
503
|
+
const editor = await createEditor({
|
|
504
|
+
content: NodeFactory.doc([
|
|
505
|
+
NodeFactory.paragraph({ preset: { id: 'regular-2' } }, [
|
|
506
|
+
NodeFactory.text('test', [
|
|
507
|
+
NodeFactory.mark(TextSettings.FONT_SIZE, { value: '44' }),
|
|
508
|
+
NodeFactory.mark(TextSettings.FONT_WEIGHT, { value: '500' })
|
|
509
|
+
])
|
|
510
|
+
])
|
|
511
|
+
]),
|
|
512
|
+
presets: [createPreset({ id: 'regular-1' })]
|
|
513
|
+
});
|
|
514
|
+
|
|
515
|
+
const customization = editor.commands.getContentCustomization();
|
|
516
|
+
|
|
517
|
+
expect(customization.value).toMatchSnapshot();
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
test('should find attributes', async () => {
|
|
521
|
+
const editor = await createEditor({
|
|
522
|
+
content: NodeFactory.doc([
|
|
523
|
+
NodeFactory.paragraph({
|
|
524
|
+
preset: { id: 'regular-2' },
|
|
525
|
+
alignment: { value: 'right' }
|
|
526
|
+
}, 'test')
|
|
527
|
+
]),
|
|
528
|
+
presets: [createPreset({ id: 'regular-2' })]
|
|
529
|
+
});
|
|
530
|
+
|
|
531
|
+
const customization = editor.commands.getContentCustomization();
|
|
532
|
+
|
|
533
|
+
expect(customization.value).toMatchSnapshot();
|
|
534
|
+
});
|
|
535
|
+
});
|
|
536
|
+
|
|
489
537
|
describe('remove preset customization', () => {
|
|
490
538
|
test('should remove all marks in block', async () => {
|
|
491
539
|
const editor = await createEditor({
|
|
@@ -197,6 +197,32 @@ Object {
|
|
|
197
197
|
}
|
|
198
198
|
`;
|
|
199
199
|
|
|
200
|
+
exports[`get content customization should find attributes 1`] = `
|
|
201
|
+
Object {
|
|
202
|
+
"attributes": Array [
|
|
203
|
+
"alignment",
|
|
204
|
+
],
|
|
205
|
+
"marks": Array [],
|
|
206
|
+
}
|
|
207
|
+
`;
|
|
208
|
+
|
|
209
|
+
exports[`get content customization should find marks 1`] = `
|
|
210
|
+
Object {
|
|
211
|
+
"attributes": Array [],
|
|
212
|
+
"marks": Array [
|
|
213
|
+
"font_size",
|
|
214
|
+
"font_weight",
|
|
215
|
+
],
|
|
216
|
+
}
|
|
217
|
+
`;
|
|
218
|
+
|
|
219
|
+
exports[`get content customization should return empty content customization 1`] = `
|
|
220
|
+
Object {
|
|
221
|
+
"attributes": Array [],
|
|
222
|
+
"marks": Array [],
|
|
223
|
+
}
|
|
224
|
+
`;
|
|
225
|
+
|
|
200
226
|
exports[`get preset customization should find attributes 1`] = `
|
|
201
227
|
Object {
|
|
202
228
|
"attributes": Array [
|