@zipify/wysiwyg 1.4.0-0 → 1.4.0-1

package/dist/wysiwyg.css

@@ -23,7 +23,7 @@
     column-gap: var(--zw-offset-xxs);
 }
 
-.zw-button[data-v-2fa65564] {
+.zw-button[data-v-1ea5f7a2] {
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
@@ -43,21 +43,21 @@
     transition: 0.1s opacity ease-out;
     will-change: opacity;
 }
-.zw-button[data-v-2fa65564]::-moz-focus-inner {
+.zw-button[data-v-1ea5f7a2]::-moz-focus-inner {
     border: 0 !important;
 }
-.zw-button[data-v-2fa65564]:hover,
-.zw-button[data-v-2fa65564]:focus {
+.zw-button[data-v-1ea5f7a2]:hover,
+.zw-button[data-v-1ea5f7a2]:focus {
     text-decoration: none;
     outline: none;
 }
-.zw-button[data-v-2fa65564]:disabled {
+.zw-button[data-v-1ea5f7a2]:disabled {
     user-select: none;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.35;
 }
-.zw-button--toolbar[data-v-2fa65564] {
+.zw-button--toolbar[data-v-1ea5f7a2] {
     border-radius: 1px;
     min-height: 28px;
     font-weight: var(--zw-font-weight-semibold);
@@ -67,36 +67,35 @@
     transition-property: background-color, color, opacity;
     will-change: background-color, color, opacity;
 }
-.zw-button--primary[data-v-2fa65564] {
+.zw-button--primary[data-v-1ea5f7a2] {
     background-color: rgb(var(--zw-color-green));
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     line-height: var(--zw-line-height-md);
 }
-.zw-button--primary[data-v-2fa65564],
-.zw-button--secondary[data-v-2fa65564] {
+.zw-button--primary[data-v-1ea5f7a2],
+.zw-button--secondary[data-v-1ea5f7a2] {
     color: rgb(var(--zw-color-white));
     padding: var(--zw-offset-xxs) var(--zw-offset-sm);
     font-weight: 600;
     font-size: var(--zw-font-size-xs);
 }
-.zw-button--primary[data-v-2fa65564]:not(:disabled):hover,
-.zw-button--secondary[data-v-2fa65564]:not(:disabled):hover {
+.zw-button--primary[data-v-1ea5f7a2]:not(:disabled):hover,
+.zw-button--secondary[data-v-1ea5f7a2]:not(:disabled):hover {
     opacity: 0.9;
 }
-.zw-button--toolbar[data-v-2fa65564]:not(.zw-button--icon) {
+.zw-button--toolbar[data-v-1ea5f7a2]:not(.zw-button--icon) {
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }
-.zw-button--toolbar[data-v-2fa65564]:not(:disabled):hover,
-.zw-button--toolbar[data-v-2fa65564]:not(:disabled):focus,
-.zw-button--toolbar.zw-button--active[data-v-2fa65564]:not(:disabled) {
+.zw-button--toolbar[data-v-1ea5f7a2]:not(:disabled):hover,
+.zw-button--toolbar[data-v-1ea5f7a2]:not(:disabled):focus,
+.zw-button--toolbar.zw-button--active[data-v-1ea5f7a2]:not(:disabled) {
     color: rgb(var(--zw-color-white));
     background-color: rgb(var(--zw-color-n5));
 }
-.zw-button__customized-indicator[data-v-2fa65564] {
-    display: inline-block !important;
+.zw-button__customized-indicator[data-v-1ea5f7a2] {
     position: absolute;
-    top: calc(0px - var(--zw-offset-xxs));
+    top: 0;
     right: 2px;
 }
 
@@ -461,21 +460,21 @@
     font-size: var(--zw-font-size-xs);
 }
 
-.zw-dropdown__activator[data-v-58b29148] {
+.zw-dropdown__activator[data-v-0f1c87fd] {
     width: 100%;
 }
-.zw-dropdown__activator-arrow[data-v-58b29148] {
+.zw-dropdown__activator-arrow[data-v-0f1c87fd] {
     margin-left: auto;
 }
-.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-58b29148] {
+.zw-dropdown__activator--active .zw-dropdown__activator-arrow[data-v-0f1c87fd] {
     transform: rotateX(180deg);
 }
-.zw-dropdown__activator--gray[data-v-58b29148] {
+.zw-dropdown__activator--gray[data-v-0f1c87fd] {
     background-color: rgb(var(--zw-color-n20));
     font-size: var(--zw-font-size-xxs);
     color: rgb(var(--zw-color-white));
 }
-.zw-dropdown__customized-indicator[data-v-58b29148] {
+.zw-dropdown__customized-indicator[data-v-0f1c87fd] {
     position: relative;
     top: calc(0px - var(--zw-offset-xs));
 }
@@ -572,17 +571,17 @@
     flex-direction: column;
 }
 
-.zw-line-height-control__modal[data-v-8aeefd68] {
+.zw-line-height-control__modal[data-v-c316d7dc] {
     padding: var(--zw-offset-sm);
 }
-.zw-line-height-control__row[data-v-8aeefd68] {
+.zw-line-height-control__row[data-v-c316d7dc] {
     display: flex;
     align-items: center;
 }
-.zw-line-height-control__range[data-v-8aeefd68] {
+.zw-line-height-control__range[data-v-c316d7dc] {
     width: 156px;
 }
-.zw-line-height-control__field[data-v-8aeefd68] {
+.zw-line-height-control__field[data-v-c316d7dc] {
     width: 64px;
     margin-left: var(--zw-offset-sm);
 }

package/dist/wysiwyg.mjs

@@ -14286,7 +14286,7 @@ var __component__$F = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$F,
   false,
   __vue2_injectStyles$F,
-  "2fa65564",
+  "1ea5f7a2",
   null,
   null
 );
@@ -19840,13 +19840,17 @@ const outClick = {
     toggleListener(false, dataStorage.get(el).callback);
   }
 };
-function tooltip(el, { value }) {
+function tooltip(el, { value, modifiers: modifiers2 }) {
   const options = typeof value === "string" ? { text: value } : value;
   const { text: text2, hotkey } = options;
   if (text2)
     el.dataset.tooltip = text2;
   if (text2 && hotkey)
     el.dataset.tooltipHotkey = hotkey;
+  if (modifiers2.xs)
+    el.dataset.tooltipSize = "xs";
+  if (modifiers2.lg)
+    el.dataset.tooltipSize = "lg";
 }
 var render$y = function __render__11() {
   var _vm = this;
@@ -20145,6 +20149,15 @@ var render$v = function __render__14() {
     }, [_c("span", {
       staticClass: "zw-dropdown__activator-title zw-text--truncate"
     }, [_vm._v(" " + _vm._s(_vm.activeOptionTitle) + " ")]), _vm.isCustomized ? _c("Icon", {
+      directives: [{
+        name: "tooltip",
+        rawName: "v-tooltip.xs",
+        value: "Default parameter setting is changed",
+        expression: "'Default parameter setting is changed'",
+        modifiers: {
+          "xs": true
+        }
+      }],
       staticClass: "zw-dropdown__customized-indicator",
       attrs: {
         "name": "indicator",
@@ -20172,6 +20185,9 @@ const __vue2_script$v = {
     Icon,
     Button
   },
+  directives: {
+    tooltip
+  },
   model: {
     event: "change"
   },
@@ -20211,7 +20227,7 @@ var __component__$v = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$v,
   false,
   __vue2_injectStyles$v,
-  "58b29148",
+  "0f1c87fd",
   null,
   null
 );
@@ -21162,6 +21178,15 @@ var render$k = function __render__25() {
             "auto-color": ""
           }
         }), _vm.isCustomized ? _c("Icon", {
+          directives: [{
+            name: "tooltip",
+            rawName: "v-tooltip.xs",
+            value: "Default parameter setting is changed",
+            expression: "'Default parameter setting is changed'",
+            modifiers: {
+              "xs": true
+            }
+          }],
           staticClass: "zw-button__customized-indicator",
           attrs: {
             "name": "indicator",
@@ -21327,6 +21352,15 @@ var render$i = function __render__27() {
       "auto-color": ""
     }
   }), _vm.isCustomized ? _c("Icon", {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip.xs",
+      value: "Default parameter setting is changed",
+      expression: "'Default parameter setting is changed'",
+      modifiers: {
+        "xs": true
+      }
+    }],
     staticClass: "zw-button__customized-indicator",
     attrs: {
       "name": "indicator",
@@ -21408,6 +21442,15 @@ var render$h = function __render__28() {
       "auto-color": ""
     }
   }), _vm.isCustomized ? _c("Icon", {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip.xs",
+      value: "Default parameter setting is changed",
+      expression: "'Default parameter setting is changed'",
+      modifiers: {
+        "xs": true
+      }
+    }],
     staticClass: "zw-button__customized-indicator",
     attrs: {
       "name": "indicator",
@@ -21704,6 +21747,15 @@ var render$d = function __render__32() {
             "click": activate
           }
         }, [_vm.isCustomized && isActive2 ? _c("Icon", {
+          directives: [{
+            name: "tooltip",
+            rawName: "v-tooltip.xs",
+            value: "Default parameter setting is changed",
+            expression: "'Default parameter setting is changed'",
+            modifiers: {
+              "xs": true
+            }
+          }],
           staticClass: "zw-button__customized-indicator",
           attrs: {
             "name": "indicator",
@@ -21902,6 +21954,15 @@ var render$b = function __render__34() {
       "auto-color": ""
     }
   }), _vm.isCustomized ? _c("Icon", {
+    directives: [{
+      name: "tooltip",
+      rawName: "v-tooltip.xs",
+      value: "Default parameter setting is changed",
+      expression: "'Default parameter setting is changed'",
+      modifiers: {
+        "xs": true
+      }
+    }],
     staticClass: "zw-button__customized-indicator",
     attrs: {
       "name": "indicator",
@@ -21987,7 +22048,7 @@ var __component__$b = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$b,
   false,
   __vue2_injectStyles$b,
-  "8aeefd68",
+  "c316d7dc",
   null,
   null
 );
@@ -23082,7 +23143,7 @@ const FontFamily = Mark.create({
   },
   parseHTML() {
     const getAttrs = (input) => {
-      const parsed = input.replace(/"/g, "");
+      const parsed = input.replace(/["']/g, "");
       const isExists = this.options.fonts.some((font) => font.name === parsed);
       const value = isExists ? parsed : unref(this.options.defaultPreset).common.font_family;
       return { value };

package/lib/cli/commands/Command.js

@@ -0,0 +1,34 @@
+export class Command {
+    name;
+    argument;
+    options = [];
+
+    doCommand() {
+        throw new Error('Command "doCommand" is required');
+    }
+
+    install(program) {
+        if (!this.name) {
+            throw new Error('Command "name" is required');
+        }
+
+        let building = program.command(this.name);
+
+        if (this.argument) {
+            building = building.argument(this.argument);
+        }
+
+        if (this.options.length) {
+            for (const option of this.options) {
+                building = building.option(option.flags, option.description, option.default);
+            }
+        }
+
+        building.action(this.doCommand.bind(this));
+    }
+
+    output(data) {
+        // eslint-disable-next-line no-console
+        console.log(data);
+    }
+}

package/lib/cli/commands/ToJsonCommand.js

@@ -0,0 +1,45 @@
+import { resolve } from 'path';
+import { ContentSerializer } from '../ContentSerializer';
+import { Command } from './Command';
+
+export class ToJsonCommand extends Command {
+    name = 'to-json';
+    argument = '<html>';
+
+    options = [
+        {
+            flags: '--config <path>',
+            description: 'Generator config',
+            // Relative to dist folder
+            default: resolve(__dirname, '../bin/zp.config.json')
+        }
+    ];
+
+    doCommand(html, { config }) {
+        const configPath = resolve(process.cwd(), config);
+        const serializer = ContentSerializer.build(require(configPath).editor);
+        const json = serializer.toJSON(this.#formatInputHtml(html));
+
+        this.output(this.#formatOutputJson(json));
+    }
+
+    #formatInputHtml(html) {
+        return html
+            .replace(/\\(["'])/g, '$1')
+            .replace(/rgba\(\d{1,3}, ?\d{1,3}, ?\d{1,3}, (\d{1,2}%)\)/g, (substring, alpha) => {
+                return substring.replace(alpha, parseFloat(alpha) / 100);
+            });
+    }
+
+    #formatOutputJson(object) {
+        const skipNullValue = (_, value) => value === null ? undefined : value;
+        const json = JSON.stringify(object, skipNullValue, 2);
+
+        return json
+            .replace(/\\"/g, '"')
+            .replace(/font-family: ?'(.+)'/g, 'font-family: "$1"')
+            .replace(/'/g, '\\\'')
+            .replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, (match) => match.replace(/"/g, ''))
+            .replace(/: "(.+)"([,\n])/g, ': \'$1\'$2');
+    }
+}

package/lib/cli/commands/index.js

@@ -0,0 +1 @@
+export { ToJsonCommand } from './ToJsonCommand';

package/lib/cli/index.js

@@ -1 +1,2 @@
 export { ContentSerializer } from './ContentSerializer';
+export * from './commands';

package/lib/components/base/Button.vue

@@ -137,9 +137,8 @@ export default {
 }
 
 .zw-button__customized-indicator {
-    display: inline-block !important;
     position: absolute;
-    top: calc(0px - var(--zw-offset-xxs));
+    top: 0;
     right: 2px;
 }
 </style>

package/lib/components/base/dropdown/DropdownActivator.vue

@@ -18,6 +18,7 @@
                     name="indicator"
                     size="9px"
                     data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
                 />
 
                 <Icon
@@ -35,6 +36,7 @@
 import { computed, inject, toRef } from 'vue';
 import Button from '../Button';
 import Icon from '../Icon';
+import { tooltip } from '../../../directives';
 import { InjectionTokens } from './injectionTokens';
 import { useDropdownEntityTitle } from './composables';
 
@@ -46,6 +48,10 @@ export default {
         Button
     },
 
+    directives: {
+        tooltip
+    },
+
     model: {
         event: 'change'
     },

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

@@ -15,6 +15,7 @@
                     name="indicator"
                     size="9px"
                     data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
                 />
                 <Icon :name="`alignment-${option.id}`" size="28px" auto-color />
             </Button>

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

@@ -17,6 +17,7 @@
                     name="indicator"
                     size="9px"
                     data-test-selector="customizedIndicator"
+                    v-tooltip.xs="'Default parameter setting is changed'"
                 />
             </Button>
         </template>

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

@@ -16,6 +16,7 @@
             name="indicator"
             size="9px"
             data-test-selector="customizedIndicator"
+            v-tooltip.xs="'Default parameter setting is changed'"
         />
     </Button>
 </template>

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

@@ -16,6 +16,7 @@
                 name="indicator"
                 size="9px"
                 data-test-selector="customizedIndicator"
+                v-tooltip.xs="'Default parameter setting is changed'"
             />
         </Button>
 

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

@@ -15,6 +15,7 @@
             name="indicator"
             size="9px"
             data-test-selector="customizedIndicator"
+            v-tooltip.xs="'Default parameter setting is changed'"
         />
     </Button>
 </template>

package/lib/directives/__tests__/tooltip.test.js

@@ -4,7 +4,7 @@ describe('rendering', () => {
     test('should render text only tooltip', () => {
         const el = document.createElement('div');
 
-        tooltip(el, { value: 'Test' });
+        tooltip(el, { value: 'Test', modifiers: {} });
 
         expect(el.dataset.tooltip).toBe('Test');
     });
@@ -13,7 +13,8 @@ describe('rendering', () => {
         const el = document.createElement('div');
 
         tooltip(el, {
-            value: { text: 'Test' }
+            value: { text: 'Test' },
+            modifiers: {}
         });
 
         expect(el.dataset.tooltip).toBe('Test');
@@ -23,7 +24,8 @@ describe('rendering', () => {
         const el = document.createElement('div');
 
         tooltip(el, {
-            value: { text: 'Test', hotkey: 'Mod B' }
+            value: { text: 'Test', hotkey: 'Mod B' },
+            modifiers: {}
         });
 
         expect(el.dataset.tooltipHotkey).toBe('Mod B');
@@ -32,8 +34,24 @@ describe('rendering', () => {
     test('should not render tooltip if no value passed', () => {
         const el = document.createElement('div');
 
-        tooltip(el, { value: '' });
+        tooltip(el, { value: '', modifiers: {} });
 
         expect(el.dataset).not.toHaveProperty('tooltip');
     });
+
+    test('should render xs size', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '', modifiers: { xs: true } });
+
+        expect(el.dataset).toHaveProperty('tooltipSize', 'xs');
+    });
+
+    test('should render lg size', () => {
+        const el = document.createElement('div');
+
+        tooltip(el, { value: '', modifiers: { lg: true } });
+
+        expect(el.dataset).toHaveProperty('tooltipSize', 'lg');
+    });
 });

package/lib/directives/tooltip.js

@@ -1,7 +1,10 @@
-export function tooltip(el, { value }) {
+export function tooltip(el, { value, modifiers }) {
     const options = typeof value === 'string' ? { text: value } : value;
     const { text, hotkey } = options;
 
     if (text) el.dataset.tooltip = text;
     if (text && hotkey) el.dataset.tooltipHotkey = hotkey;
+
+    if (modifiers.xs) el.dataset.tooltipSize = 'xs';
+    if (modifiers.lg) el.dataset.tooltipSize = 'lg';
 }

package/lib/entry-cli.js

@@ -1,28 +1,14 @@
-import { resolve } from 'path';
 import { Command } from 'commander';
-import { ContentSerializer } from './cli';
+import { ToJsonCommand } from './cli';
 
 const program = new Command();
 
-function rubifyJSON(object) {
-    const skipNullValue = (_, value) => value === null ? undefined : value;
-    const json = JSON.stringify(object, skipNullValue, 2);
+const commands = [
+    ToJsonCommand
+];
 
-    return json
-        .replace(/^[\t ]*"[^:\n\r]+(?<!\\)":/gm, (match) => match.replace(/"/g, ''))
-        .replace(/: "(.+)"([,\n])/g, ': \'$1\'$2');
+for (const CommandClass of commands) {
+    new CommandClass().install(program);
 }
 
-program.command('to-json')
-    .argument('<html>')
-    .option('--config <path>', 'generator config', resolve(__dirname, '../bin/zp.config.json'))
-    .action((html, { config }) => {
-        const configPath = resolve(process.cwd(), config);
-        const serializer = ContentSerializer.build(require(configPath).editor);
-        const json = rubifyJSON(serializer.toJSON(html));
-
-        // eslint-disable-next-line no-console
-        console.log(json);
-    });
-
 program.parse();

package/lib/extensions/FontFamily.js

@@ -62,7 +62,7 @@ export const FontFamily = Mark.create({
 
     parseHTML() {
         const getAttrs = (input) => {
-            const parsed = input.replace(/"/g, '');
+            const parsed = input.replace(/["']/g, '');
             const isExists = this.options.fonts.some((font) => font.name === parsed);
             const value = isExists ? parsed : unref(this.options.defaultPreset).common.font_family;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.4.0-0",
+  "version": "1.4.0-1",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {
@@ -20,7 +20,8 @@
     "lib:build": "vite build --config config/build/lib.config.js",
     "lib:pre-release": "run-s lint:js lint:css test:unit",
     "lib:release": "export $(cat ./.env | xargs) && run-s lib:pre-release lib:build cli:build && release-it",
-    "cli:build": "rollup --config config/build/cli.config.js",
+    "cli:build": "NODE_ENV=production rollup --config config/build/cli.config.js",
+    "cli:dev": "NODE_ENV=development rollup --config config/build/cli.config.js --watch",
     "example:start": "NODE_ENV=development vite serve --config config/build/example.config.js",
     "example:build": "NODE_ENV=production vite build --config config/build/example.config.js",
     "test:unit": "jest .",