@zipify/wysiwyg 2.0.0-9 → 2.0.0

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/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__/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

@@ -141,10 +141,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,5 @@ export const buildCoreExtensions = () => [
     NodeProcessor,
     TextProcessor,
     SelectionProcessor,
-    CopyPasteProcessor
+    ProseMirrorPlugins
 ];

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() {

package/lib/extensions/list/ListItem.js

@@ -1,17 +1,48 @@
 import Base from '@tiptap/extension-list-item';
 import { MarkGroups, NodeTypes } from '../../enums';
+import { copyMark, createCommand } from '../../utils';
+import { AddNodeMarkStep } from '../core/steps';
 
 export const ListItem = Base.extend({
     name: NodeTypes.LIST_ITEM,
     marks: MarkGroups.SETTINGS,
 
+    addCommands() {
+        const getItemPosition = ({ selection }) => selection.$cursor.before(selection.$cursor.depth - 1);
+
+        return {
+            listItemNewline: createCommand(({ commands, tr }) => {
+                const initialNode = tr.doc.nodeAt(getItemPosition(tr));
+                const isEmptyParagraph = !tr.selection.$cursor.node().textContent;
+
+                if (isEmptyParagraph) return false;
+
+                commands.splitListItem(this.name);
+
+                const position = getItemPosition(tr);
+
+                for (const mark of initialNode.marks) {
+                    tr.step(new AddNodeMarkStep(position, copyMark(mark)));
+                }
+
+                return true;
+            })
+        };
+    },
+
     addOptions: () => ({
         HTMLAttributes: { class: 'zw-style' }
     }),
 
-    addKeyboardShortcuts() {
-        const { Enter } = this.parent();
+    addKeyboardShortcuts: () => ({
+        Enter: (context) => {
+            const { state, commands } = context.editor;
+
+            const isListSelected = state.selection.$cursor?.path.some((node) => {
+                return node.type?.name === NodeTypes.LIST;
+            });
 
-        return { Enter };
-    }
+            if (isListSelected) return commands.listItemNewline();
+        }
+    })
 });

package/lib/styles/content.css

@@ -1,4 +1,4 @@
-.zw-wysiwyg__placeholder:first-child:last-child::before {
+.zw-wysiwyg__placeholder::before {
     content: attr(data-placeholder);
     color: rgb(var(--zw-color-n70));
     float: left;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "2.0.0-9",
+  "version": "2.0.0",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -41,8 +41,6 @@
     "@tiptap/extension-link": "^2.0.0-beta.195",
     "@tiptap/extension-list-item": "^2.0.0-beta.195",
     "@tiptap/extension-paragraph": "^2.0.0-beta.195",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.195",
-    "@tiptap/extension-superscript": "^2.0.0-beta.195",
     "@tiptap/extension-text": "^2.0.0-beta.195",
     "@tiptap/vue-2": "^2.0.0-beta.195",
     "commander": "^9.4.0",
@@ -54,6 +52,14 @@
     "@zipify/colorpicker": "^2.2",
     "vue": "^2.7"
   },
+  "peerDependenciesMeta": {
+    "@zipify/colorpicker": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.19.1",
     "@babel/eslint-parser": "^7.19.1",

package/lib/extensions/core/CopyPasteProcessor.js

@@ -1,10 +0,0 @@
-import { Extension } from '@tiptap/vue-2';
-import { PastePlugin } from './plugins';
-
-export const CopyPasteProcessor = Extension.create({
-    name: 'copy_paste_processor',
-
-    addProseMirrorPlugins() {
-        return [PastePlugin.create()];
-    }
-});