@zipify/wysiwyg 2.0.0-9 → 2.1.0-builder-modes.0

package/lib/assets/icons/indicator.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9 9">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 9 9">
     <path fill="#FFAB00" d="M0 4.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"/>
     <path fill="#fff" fill-rule="evenodd" d="M5.063 2.25H3.938v3.375h1.124V2.25Zm-1.125 4.5a.562.562 0 1 1 1.123-.001.562.562 0 0 1-1.123.001Z" clip-rule="evenodd"/>
 </svg>

package/lib/cli/commands/ToJsonCommand.js

@@ -9,19 +9,25 @@ export class ToJsonCommand extends Command {
 
     options = [
         {
-            flags: '--config <path>',
+            flags: '-c, --config <path>',
             description: 'Generator config',
             // Relative to dist folder
             default: resolve(__dirname, '../bin/zp.config.json')
+        },
+        {
+            flags: '-f, --format <type>',
+            description: 'Set output format',
+            default: 'rb'
         }
     ];
 
-    doCommand(html, { config }) {
+    doCommand(html, { config, format }) {
         const configPath = resolve(process.cwd(), config);
         const serializer = ContentSerializer.build(require(configPath).editor);
-        const json = serializer.toJSON(this.#formatInputHtml(html));
+        const content = serializer.toJSON(this.#formatInputHtml(html));
+        const json = this.#stringifyContent(content);
 
-        this.output(this.#formatOutputJson(json));
+        this.output(format === 'rb' ? this.#formatOutputRb(json) : json);
     }
 
     #formatInputHtml(html) {
@@ -32,10 +38,13 @@ export class ToJsonCommand extends Command {
             });
     }
 
-    #formatOutputJson(object) {
+    #stringifyContent(content) {
         const skipNullValue = (_, value) => value === null ? undefined : value;
-        const json = JSON.stringify(object, skipNullValue, 2);
 
+        return JSON.stringify(content, skipNullValue, 2);
+    }
+
+    #formatOutputRb(json) {
         return json
             .replace(/\\"/g, '"')
             .replace(/font-family: ?'(.+)'/g, 'font-family: "$1"')

package/lib/components/toolbar/controls/AlignmentControl.vue

@@ -66,7 +66,7 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.getAlignment();
-        const isCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
 
         function apply(value) {
             editor.chain().focus().applyAlignment(value).run();

package/lib/components/toolbar/controls/FontColorControl.vue

@@ -48,7 +48,7 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.getFontColor();
-        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_COLOR);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_COLOR);
 
         const apply = (color) => editor.chain().applyFontColor(color).run();
 

package/lib/components/toolbar/controls/FontFamilyControl.vue

@@ -69,7 +69,7 @@ export default {
         }
 
         const currentValue = editor.commands.getFontFamily();
-        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_FAMILY);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_FAMILY);
 
         const apply = (fontFamily) => {
             recentFontNames.add(fontFamily);

package/lib/components/toolbar/controls/FontSizeControl.vue

@@ -36,7 +36,7 @@ export default {
         });
 
         const currentValue = editor.commands.getFontSize();
-        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_SIZE);
 
         const apply = (value) => editor.chain().focus().applyFontSize(value).run();
 

package/lib/components/toolbar/controls/FontWeightControl.vue

@@ -34,7 +34,7 @@ export default {
         const options = computed(() => unref(font).weights.map((style) => ({ id: style })));
 
         const currentValue = editor.commands.getFontWeight();
-        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_WEIGHT);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_WEIGHT);
 
         const apply = (value) => editor.chain().focus().applyFontWeight(value).run();
 

package/lib/components/toolbar/controls/ItalicControl.vue

@@ -44,7 +44,7 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.isItalic();
-        const isCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_STYLE);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_STYLE);
 
         const isAvailable = editor.commands.isItalicAvailable();
         const apply = () => editor.chain().focus().toggleItalic().run();

package/lib/components/toolbar/controls/LineHeightControl.vue

@@ -79,7 +79,7 @@ export default {
         const toggler = useModalToggler({ wrapperRef, modalRef });
 
         const currentValue = editor.commands.getLineHeight();
-        const isCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.LINE_HEIGHT);
+        const isCustomized = editor.commands.isSettingCustomized(TextSettings.LINE_HEIGHT);
 
         const apply = (value) => editor.commands.applyLineHeight(String(value));
 

package/lib/entry-lib.js

@@ -1,4 +1,4 @@
 export { default as Wysiwyg } from './Wysiwyg';
 export { NodeFactory } from './services';
 export { NodeTypes, TextSettings, Alignments } from './enums';
-export { isWysiwygContent } from './utils';
+export { isWysiwygContent, unmarkWysiwygContent, markWysiwygContent } from './utils';

package/lib/extensions/Alignment.js

@@ -52,12 +52,9 @@ export const Alignment = Extension.create({
     addCommands() {
         return {
             applyAlignment: createCommand(({ commands }, value) => {
-                // const device = unref(commands.getDevice());
-                //
-                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                const device = unref(commands.getDevice());
 
-                // Temporary until release BUILDER_MODES
-                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: value });
+                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             }),
 
             getAlignment: createCommand(({ commands }) => {

package/lib/extensions/FontSize.js

@@ -2,6 +2,7 @@ import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
 import { MarkGroups, TextSettings } from '../enums';
+import { AddNodeMarkStep } from './core';
 
 export const FontSize = Mark.create({
     name: TextSettings.FONT_SIZE,
@@ -34,12 +35,31 @@ export const FontSize = Mark.create({
             }),
 
             applyFontSize: createCommand(({ commands }, value) => {
-                // const device = unref(commands.getDevice());
+                const device = unref(commands.getDevice());
 
-                // commands.applyMark(this.name, { [device]: value });
+                commands.applyMark(this.name, { [device]: value }, {
+                    isAppliedToParent: (parentMark, mark) => {
+                        if (parentMark.type.name !== mark.type.name) return false;
 
-                // Temporary until release BUILDER_MODES
-                commands.applyMark(this.name, { desktop: value, tablet: value, mobile: null });
+                        return parentMark.attrs[device] === mark.attrs[device];
+                    },
+
+                    onAppliedToParent: ({ tr, node, position, mark }) => {
+                        const attrs = { ...mark.attrs, [device]: null };
+                        const canRemove = !Object.values(attrs).some((value) => !!value);
+
+                        if (canRemove) return false;
+
+                        const updated = mark.type.create(attrs);
+
+                        if (node.isText) {
+                            tr.addMark(position, position + node.nodeSize, updated);
+                            return;
+                        }
+
+                        tr.step(new AddNodeMarkStep(position, updated));
+                    }
+                });
             }),
 
             increaseFontSize: createCommand(({ commands }) => {
@@ -89,8 +109,6 @@ export const FontSize = Mark.create({
                 getAttrs: (input) => {
                     const value = parseSize(input);
 
-                    // return { desktop: value, tablet: value, mobile: value };
-                    // Temporary until release BUILDER_MODES
                     return { desktop: value, tablet: value, mobile: null };
                 }
             }

package/lib/extensions/LineHeight.js

@@ -36,9 +36,6 @@ export const LineHeight = Extension.create({
                             const wrapperEl = unref(this.options.wrapperRef);
                             const converted = convertLineHeight(value, element, wrapperEl);
 
-                            // return { desktop: converted, tablet: converted, mobile: converted };
-
-                            // Temporary until release BUILDER_MODES
                             return { desktop: converted, tablet: converted, mobile: null };
                         },
 
@@ -75,12 +72,9 @@ export const LineHeight = Extension.create({
             }),
 
             applyLineHeight: createCommand(({ commands }, value) => {
-                // const device = unref(commands.getDevice());
-                //
-                // commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
+                const device = unref(commands.getDevice());
 
-                // Temporary until release BUILDER_MODES
-                commands.setBlockAttributes(this.name, { desktop: value, tablet: value, mobile: null }, DEFAULTS);
+                commands.setBlockAttributes(this.name, { [device]: value }, DEFAULTS);
             })
         };
     }

package/lib/extensions/StylePreset.js

@@ -161,8 +161,9 @@ export const StylePreset = Extension.create({
                 });
             }),
 
-            isSettingCustomized: createCommand(({ commands }, group, name) => {
+            isSettingCustomized: createCommand(({ commands }, name) => {
                 const customization = commands.getPresetCustomization();
+                const group = TextSettings.attributes.includes(name) ? 'attributes' : 'marks';
 
                 return computed(() => unref(customization)[group]?.includes(name) ?? false);
             }),

package/lib/extensions/Superscript.js

@@ -1,27 +1,25 @@
-import Base from '@tiptap/extension-superscript';
+import { Mark } from '@tiptap/vue-2';
 import { computed, unref } from 'vue';
 import { createCommand } from '../utils';
 import { TextSettings } from '../enums';
 
-export const Superscript = Base.extend({
+export const Superscript = Mark.create({
     name: TextSettings.SUPERSCRIPT,
-    addKeyboardShortcuts: null,
-
-    addOptions: () => ({
-        HTMLAttributes: { class: 'zw-superscript' }
-    }),
 
     addCommands() {
-        const { setSuperscript, unsetSuperscript } = this.parent();
-
         return {
-            applySuperscript: setSuperscript,
-            removeSuperscript: unsetSuperscript,
+            applySuperscript: createCommand(({ commands }) => {
+                commands.setMark(this.name);
+            }),
+
+            removeSuperscript: createCommand(({ commands }) => {
+                commands.unsetMark(this.name);
+            }),
 
             toggleSuperscript: createCommand(({ commands }) => {
                 const isActive = unref(commands.isSuperscript());
 
-                isActive ? commands.applySuperscript() : commands.removeSuperscript();
+                isActive ? commands.removeSuperscript() : commands.applySuperscript();
             }),
 
             isSuperscript: createCommand(({ commands }) => {
@@ -30,5 +28,20 @@ export const Superscript = Base.extend({
                 return computed(() => !!unref(selectionRef));
             })
         };
+    },
+
+    parseHTML() {
+        return [
+            { tag: 'sup' },
+
+            {
+                style: 'vertical-align',
+                getAttrs: (value) => value !== 'super' ? false : null
+            }
+        ];
+    },
+
+    renderHTML() {
+        return ['sup', { class: 'zw-superscript' }, 0];
     }
 });

package/lib/extensions/__tests__/StylePreset.test.js

@@ -413,8 +413,8 @@ describe('get preset customization', () => {
             presets: [createPreset({ id: 'regular-1' })]
         });
 
-        const isFontSizeCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
-        const isAlignmentCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
+        const isFontSizeCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_SIZE);
+        const isAlignmentCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
 
         expect(isFontSizeCustomized.value).toBe(false);
         expect(isAlignmentCustomized.value).toBe(false);
@@ -454,7 +454,7 @@ describe('get preset customization', () => {
         });
 
         editor.commands.selectAll();
-        const isFontSizeCustomized = editor.commands.isSettingCustomized('marks', TextSettings.FONT_SIZE);
+        const isFontSizeCustomized = editor.commands.isSettingCustomized(TextSettings.FONT_SIZE);
 
         expect(isFontSizeCustomized.value).toBe(true);
     });
@@ -489,7 +489,7 @@ describe('get preset customization', () => {
         });
 
         editor.commands.selectAll();
-        const isAlignmentCustomized = editor.commands.isSettingCustomized('attributes', TextSettings.ALIGNMENT);
+        const isAlignmentCustomized = editor.commands.isSettingCustomized(TextSettings.ALIGNMENT);
 
         expect(isAlignmentCustomized.value).toBe(true);
     });

package/lib/extensions/__tests__/__snapshots__/Alignment.test.js.snap

@@ -7,8 +7,8 @@ Object {
       "attrs": Object {
         "alignment": Object {
           "desktop": "right",
-          "mobile": "right",
-          "tablet": "right",
+          "mobile": null,
+          "tablet": null,
         },
       },
       "content": Array [

package/lib/extensions/__tests__/__snapshots__/FontSize.test.js.snap

@@ -15,7 +15,7 @@ Object {
           "attrs": Object {
             "desktop": "16",
             "mobile": null,
-            "tablet": "16",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -42,7 +42,7 @@ Object {
           "attrs": Object {
             "desktop": "13",
             "mobile": null,
-            "tablet": "13",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -69,7 +69,7 @@ Object {
           "attrs": Object {
             "desktop": "15",
             "mobile": null,
-            "tablet": "15",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -96,7 +96,7 @@ Object {
           "attrs": Object {
             "desktop": "5",
             "mobile": null,
-            "tablet": "5",
+            "tablet": null,
           },
           "type": "font_size",
         },
@@ -123,7 +123,7 @@ Object {
           "attrs": Object {
             "desktop": "20",
             "mobile": null,
-            "tablet": "20",
+            "tablet": null,
           },
           "type": "font_size",
         },

package/lib/extensions/__tests__/__snapshots__/LineHeight.test.js.snap

@@ -8,7 +8,7 @@ Object {
         "line_height": Object {
           "desktop": "1.41",
           "mobile": null,
-          "tablet": "1.41",
+          "tablet": null,
         },
       },
       "content": Array [

package/lib/extensions/__tests__/__snapshots__/Superscript.test.js.snap

@@ -45,6 +45,11 @@ Object {
     Object {
       "content": Array [
         Object {
+          "marks": Array [
+            Object {
+              "type": "superscript",
+            },
+          ],
           "text": "hello world",
           "type": "text",
         },
@@ -62,11 +67,6 @@ Object {
     Object {
       "content": Array [
         Object {
-          "marks": Array [
-            Object {
-              "type": "superscript",
-            },
-          ],
           "text": "hello world",
           "type": "text",
         },

package/lib/extensions/core/NodeProcessor.js

@@ -37,7 +37,7 @@ export const NodeProcessor = Extension.create({
                 return Object.keys(attrs).length ? attrs : null;
             })),
 
-            applyMark: createCommand(({ state, commands }, name, value) => {
+            applyMark: createCommand(({ state, commands }, name, value, customizer = {}) => {
                 const { tr, doc, schema } = state;
                 const { $from, $to } = tr.selection;
                 const markType = getMarkType(name, schema);
@@ -50,6 +50,14 @@ export const NodeProcessor = Extension.create({
 
                 if ($from.pos === $to.pos) return;
 
+                const onAppliedToParent = (context) => {
+                    if (!customizer.onAppliedToParent || customizer.onAppliedToParent(context) === false) {
+                        const { tr, node, position, mark } = context;
+
+                        commands._removeNodeMark({ tr, node, position, mark: mark.type });
+                    }
+                };
+
                 doc.nodesBetween($from.pos, $to.pos, (node, position) => {
                     if (node.type.name === NodeTypes.LIST) return;
 
@@ -57,8 +65,8 @@ export const NodeProcessor = Extension.create({
                     const applyingMark = markType.create({ ...(initialMark?.attrs || {}), ...value });
                     const textPosition = resolveTextPosition($from, $to, node, position);
 
-                    if (isMarkAppliedToParent(tr.doc, position, applyingMark)) {
-                        return commands._removeNodeMark({ tr, node, position, mark: markType });
+                    if (isMarkAppliedToParent(tr.doc, position, applyingMark, customizer.isAppliedToParent)) {
+                        return onAppliedToParent({ tr, node, position, mark: applyingMark });
                     }
 
                     if (node.isText) {
@@ -141,10 +149,6 @@ export const NodeProcessor = Extension.create({
                 });
             }),
 
-            removeMark: createCommand(({ commands, state }, node, position, mark) => {
-                commands._removeNodeMark({ tr: state.tr, node, position, mark });
-            }),
-
             _removeNodeMark: createCommand((context, { tr, node, position, mark }) => {
                 return node.isText
                     ? tr.removeMark(position, position + node.nodeSize, mark)

package/lib/extensions/core/index.js

@@ -1,20 +1,27 @@
+import { Extension } from '@tiptap/vue-2';
 import Text from '@tiptap/extension-text';
-import Placeholder from '@tiptap/extension-placeholder';
 import History from '@tiptap/extension-history';
 import { NodeProcessor } from './NodeProcessor';
 import { TextProcessor } from './TextProcessor';
 import { SelectionProcessor } from './SelectionProcessor';
-import { CopyPasteProcessor } from './CopyPasteProcessor';
 import { Document } from './Document';
 import { Paragraph } from './Paragraph';
 import { Heading } from './Heading';
+import { PastePlugin, PlaceholderPlugin } from './plugins';
+
+const ProseMirrorPlugins = Extension.create({
+    name: 'prose_mirror_plugins',
+
+    addProseMirrorPlugins() {
+        return [
+            PastePlugin.create(this.editor),
+            PlaceholderPlugin.create(this.editor)
+        ];
+    }
+});
 
 export const buildCoreExtensions = () => [
     Document,
-    Placeholder.configure({
-        placeholder: 'Type your text here...',
-        emptyNodeClass: 'zw-wysiwyg__placeholder'
-    }),
     Paragraph,
     Heading,
     Text,
@@ -22,5 +29,7 @@ export const buildCoreExtensions = () => [
     NodeProcessor,
     TextProcessor,
     SelectionProcessor,
-    CopyPasteProcessor
+    ProseMirrorPlugins
 ];
+
+export * from './steps';

package/lib/extensions/core/plugins/PastePlugin.js

@@ -11,6 +11,10 @@ export class PastePlugin extends ProseMirrorPlugin {
     }
 
     _transformPastedHTML(html) {
+        if (html.includes('data-pm-slice') && html.includes('zw-style')) {
+            return html;
+        }
+
         const normalizer = ContentNormalizer.build(html);
 
         normalizer.normalizeHTML();

package/lib/extensions/core/plugins/PlaceholderPlugin.js

@@ -0,0 +1,30 @@
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { ProseMirrorPlugin } from './ProseMirrorPlugin';
+
+export class PlaceholderPlugin extends ProseMirrorPlugin {
+    buildProps() {
+        return { decorations: this.#buildDecorations.bind(this) };
+    }
+
+    #buildDecorations({ doc }) {
+        const decorations = [];
+
+        if (!this.editor.isEditable) return null;
+        if (doc.childCount > 1) return;
+
+        doc.descendants((node, pos) => {
+            if (!node.childCount) {
+                const decoration = Decoration.node(pos, pos + node.nodeSize, {
+                    class: 'zw-wysiwyg__placeholder',
+                    'data-placeholder': 'Type your text here...'
+                });
+
+                decorations.push(decoration);
+            }
+
+            return false;
+        });
+
+        return DecorationSet.create(doc, decorations);
+    }
+}

package/lib/extensions/core/plugins/ProseMirrorPlugin.js

@@ -1,8 +1,8 @@
 import { Plugin, PluginKey } from 'prosemirror-state';
 
 export class ProseMirrorPlugin {
-    static create(options) {
-        const plugin = new this(options || {});
+    static create(editor, options) {
+        const plugin = new this(editor, options || {});
 
         return new Plugin({
             key: new PluginKey(this.name),
@@ -10,8 +10,9 @@ export class ProseMirrorPlugin {
         });
     }
 
-    constructor(options) {
+    constructor(editor, options) {
         this.options = options;
+        this.editor = editor;
     }
 
     buildProps() {

package/lib/extensions/core/plugins/index.js

@@ -1 +1,2 @@
 export { PastePlugin } from './PastePlugin';
+export { PlaceholderPlugin } from './PlaceholderPlugin';

package/lib/extensions/index.js

@@ -34,7 +34,8 @@ export function buildExtensions(options) {
             makeVariable: options.makePresetVariable
         }),
         List.configure({
-            baseClass: options.baseListClass
+            baseClass: options.baseListClass,
+            presetClass: options.basePresetClass + options.defaultPresetId
         }),
         DeviceManager.configure({
             device: options.deviceRef

package/lib/extensions/list/List.js

@@ -16,7 +16,8 @@ export const List = Node.create({
     ],
 
     addOptions: () => ({
-        baseClass: ''
+        baseClass: '',
+        presetClass: ''
     }),
 
     addAttributes: () => ({
@@ -60,11 +61,13 @@ export const List = Node.create({
     },
 
     renderHTML({ HTMLAttributes: attrs }) {
+        const classes = [
+            this.options.baseClass + attrs.bullet.type,
+            this.options.presetClass
+        ];
         const isOrdered = ListTypes.ordered.includes(attrs.bullet.type);
-        const tag = isOrdered ? 'ol' : 'ul';
-        const bulletClass = this.options.baseClass + attrs.bullet.type;
 
-        return [tag, { class: bulletClass }, 0];
+        return [isOrdered ? 'ol' : 'ul', { class: classes.join(' ') }, 0];
     },
 
     addCommands() {