@zipify/wysiwyg 1.0.0-dev.1 → 1.0.0-dev.10

package/example/ExampleApp.vue

@@ -12,11 +12,16 @@
             </option>
         </select>
 
+        <button type="button" class="zw-load-content" @click="loadContent">
+            Load Content
+        </button>
+
         <span>Deployed at {{ updatedAt }}</span>
 
         <Wysiwyg
             v-model="content"
-            base-list-class="zw-list--"
+            base-list-class="zpa-text__list--"
+            base-preset-class="zp ts-"
             default-preset-id="regular-1"
             ref="wswgRef"
             :fonts="fonts"
@@ -24,6 +29,7 @@
             :make-preset-variable="$options.makePresetVariable"
             :favorite-colors="favoriteColors"
             :device="device"
+            :active="isActive"
             @updateFavoriteColors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
@@ -36,6 +42,16 @@ import { Wysiwyg } from '../lib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 
+function getInitialContent() {
+    const data = sessionStorage.getItem('wswg-data');
+
+    try {
+        return JSON.parse(data);
+    } catch (_) {
+        return data;
+    }
+}
+
 export default {
     name: 'ExampleApp',
 
@@ -47,32 +63,11 @@ export default {
 
     setup() {
         const wswgRef = ref(null);
-        const content = ref({
-            type: 'doc',
-            content: [
-                {
-                    type: 'paragraph',
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
-                        }
-                    ]
-                },
-                {
-                    type: 'paragraph',
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
-                        }
-                    ]
-                }
-            ]
-        });
+        const content = ref(getInitialContent());
         const presets = ref(PRESETS);
         const device = ref('desktop');
         const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
+        const isActive = ref(false);
 
         const structurePreview = computed(() => {
             const json = JSON.stringify(content.value, null, '  ');
@@ -91,6 +86,20 @@ export default {
 
         onMounted(() => window.tiptap = wswgRef.value.editor);
 
+        function loadContent() {
+            const defaultValue = sessionStorage.getItem('wswg-data');
+            const content = prompt('Insert editor content', defaultValue);
+
+            if (content) {
+                sessionStorage.setItem('wswg-data', content);
+                window.location.reload();
+            }
+        }
+
+        document.body.addEventListener('click', (event) => {
+            isActive.value = wswgRef.value.$el.contains(event.target);
+        });
+
         return {
             wswgRef,
             content,
@@ -98,9 +107,11 @@ export default {
             structurePreview,
             favoriteColors,
             updateFavoriteColors,
+            loadContent,
             device,
             updatedAt,
-            presets
+            presets,
+            isActive
         };
     }
 };
@@ -115,7 +126,11 @@ body {
 }
 
 .zw-device-switcher {
-    margin-bottom: 50px;
+    margin-bottom: 75px;
+    margin-right: 20px;
+}
+
+.zw-load-content {
     margin-right: 20px;
 }
 
@@ -127,10 +142,10 @@ body {
     overflow-x: scroll;
 }
 
-.zw-list--decimal { list-style-type: decimal }
-.zw-list--disc { list-style-type: disc }
-.zw-list--circle { list-style-type: circle }
-.zw-list--square { list-style-type: square }
-.zw-list--latin { list-style-type: upper-roman }
-.zw-list--roman { list-style-type: upper-latin }
+.zpa-text__list--decimal { list-style-type: decimal }
+.zpa-text__list--disc { list-style-type: disc }
+.zpa-text__list--circle { list-style-type: circle }
+.zpa-text__list--square { list-style-type: square }
+.zpa-text__list--latin { list-style-type: upper-roman }
+.zpa-text__list--roman { list-style-type: upper-latin }
 </style>

package/example/example.js

@@ -12,6 +12,32 @@ import { tooltipManager } from './tooltip';
 
     Vue.use(CompositionAPI);
 
+    if (!sessionStorage.getItem('wswg-data')) {
+        sessionStorage.setItem('wswg-data', JSON.stringify({
+            type: 'doc',
+            content: [
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate deleniti doloremque doloribus nobis praesentium repellendus soluta. Ab distinctio eos eveniet quaerat quia recusandae repellendus. Error optio perferendis qui sapiente sequi.'
+                        }
+                    ]
+                },
+                {
+                    type: 'paragraph',
+                    content: [
+                        {
+                            type: 'text',
+                            text: 'Ab et laborum molestias omnis provident soluta suscipit tenetur voluptatum! Accusamus aliquam asperiores blanditiis dolorum enim, inventore ipsa molestias, omnis optio quod rem repellendus reprehenderit saepe, suscipit tempora ullam voluptatibus?'
+                        }
+                    ]
+                }
+            ]
+        }));
+    }
+
     new Vue({
         el: '[data-app]',
         render: (h) => h(ExampleApp)

package/example/presets.js

@@ -175,6 +175,7 @@ export const PRESETS = [
     {
         'id': 'regular-2',
         'name': 'Regular 2',
+        'fallbackClass': 'zpa-regular2',
         'desktop': {
             'alignment': 'left',
             'line_height': '1.43',
@@ -201,6 +202,7 @@ export const PRESETS = [
     {
         'id': 'regular-3',
         'name': 'Regular 3',
+        'fallbackClass': 'zpa-regular3',
         'desktop': {
             'alignment': 'left',
             'line_height': '1.43',

package/lib/Wysiwyg.vue

@@ -1,11 +1,7 @@
 <template>
-    <div
-        class="zw-wysiwyg"
-        ref="wysiwygRef"
-        v-out-click="{ onOutClick: hideToolbar, isDisabled: !toolbar.isShow.value }"
-    >
+    <div class="zw-wysiwyg" ref="wysiwygRef">
         <Toolbar
-            v-show="toolbar.isShow.value"
+            v-show="active"
             :editor="editor"
             :device="device"
             ref="toolbarRef"
@@ -54,8 +50,12 @@ export default {
 
         defaultPresetId: {
             type: [Number, String],
-            required: false,
-            default: ''
+            required: true
+        },
+
+        basePresetClass: {
+            type: String,
+            required: true
         },
 
         makePresetVariable: {
@@ -68,6 +68,11 @@ export default {
             required: true
         },
 
+        active: {
+            type: Boolean,
+            required: true
+        },
+
         device: {
             type: String,
             required: false,
@@ -102,7 +107,8 @@ export default {
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
             popperRef: toolbarRef,
-            offsets: toRef(props, 'toolbarOffsets').value
+            isActiveRef: toRef(props, 'active'),
+            offsets: props.toolbarOffsets
         });
 
         function onChange(content) {
@@ -113,7 +119,6 @@ export default {
         const editor = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
-            onFocus: () => toolbar.show(),
 
             extensions: getExtensions({
                 fonts,
@@ -122,17 +127,12 @@ export default {
                 presetsRef: toRef(props, 'presets'),
                 defaultPresetId: props.defaultPresetId,
                 makePresetVariable: props.makePresetVariable,
+                basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
                 deviceRef: toRef(props, 'device')
             })
         });
 
-        function hideToolbar() {
-            if (editor.isFocused) return;
-
-            toolbar.hide();
-        }
-
         const fontSizes = new Array(MAX_FONT_SIZE - MIN_FONT_SIZE + 1)
             .fill(0)
             .map((_, index) => String(index + MIN_FONT_SIZE));
@@ -148,7 +148,7 @@ export default {
         provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
         provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
 
-        return { editor, toolbarRef, wysiwygRef, toolbar, hideToolbar };
+        return { editor, toolbarRef, wysiwygRef, toolbar };
     }
 };
 </script>

package/lib/assets/icons/alignment-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-3 4H8v2h12v-2Zm3 4H5v2h18v-2ZM8 19h12v2H8v-2Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/alignment-justify.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H5v2h18v-2Zm0 4H5v2h18v-2ZM5 19h18v2H5v-2Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/alignment-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm-6 4H5v2h12v-2Zm6 4H5v2h18v-2ZM5 19h12v2H5v-2Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/alignment-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M23 7H5v2h18V7Zm0 4H11v2h12v-2Zm0 4H5v2h18v-2Zm-12 4h12v2H11v-2Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 8 8">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m4 6.934 4-5H0l4 5Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/background-color.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M22 20.62a2.42 2.42 0 0 1-4.84 0c0-1.25 2.42-4.54 2.42-4.54S22 19.37 22 20.62ZM9.92 15.425l1.452-3.951c.071-.182.145-.394.219-.636.074-.242.149-.503.226-.783a17.223 17.223 0 0 0 .454 1.402l1.452 3.968H9.919Zm5.411 4.199c.226-.795.658-1.684 1.184-2.562L12.955 8h-2.269L6 19.93h1.725a.736.736 0 0 0 .474-.157.792.792 0 0 0 .26-.347l.891-2.434h4.941l.891 2.434c.031.079.097.134.148.198Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/case-style.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M16.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433H8.35l-.891 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H5L9.686 8h2.269l4.686 11.93Zm-7.72-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635L8.92 15.425Zm14.968 4.505h-.915a.987.987 0 0 1-.454-.087c-.11-.058-.192-.175-.248-.35l-.181-.603a7.005 7.005 0 0 1-.631.507c-.206.146-.42.269-.64.368a3.26 3.26 0 0 1-.7.222c-.248.05-.523.075-.826.075-.357 0-.687-.049-.99-.145a2.134 2.134 0 0 1-.78-.433 1.967 1.967 0 0 1-.507-.718 2.545 2.545 0 0 1-.181-.998c0-.319.084-.634.251-.945.168-.31.447-.59.838-.841.39-.25.91-.458 1.559-.623.649-.165 1.455-.258 2.417-.28v-.495c0-.567-.12-.986-.359-1.259-.239-.272-.587-.408-1.043-.408-.33 0-.605.039-.825.116a3.17 3.17 0 0 0-.574.26 25.11 25.11 0 0 1-.45.26.912.912 0 0 1-.453.115.59.59 0 0 1-.355-.107.843.843 0 0 1-.239-.264l-.371-.652c.973-.891 2.148-1.337 3.523-1.337.494 0 .936.081 1.324.244.387.162.716.387.985.676.27.289.475.634.615 1.036.14.401.21.841.21 1.32v5.346Zm-3.96-1.271c.21 0 .402-.02.578-.058.176-.038.342-.096.5-.173.156-.077.307-.172.453-.285a4.13 4.13 0 0 0 .441-.4v-1.427c-.594.027-1.09.078-1.489.153a3.967 3.967 0 0 0-.961.284c-.242.116-.414.25-.516.404a.894.894 0 0 0-.152.504c0 .357.106.613.317.767.212.154.489.231.83.231Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/font-color.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="#fff" stroke="#B3B3B3" d="M4.5 4.5h19v19h-19z"/>
+    <path fill="#3B3B3B" d="M26 20.7a2.51 2.51 0 0 1-5 0c0-1.31 2.5-4.7 2.5-4.7s2.5 3.39 2.5 4.7Z"/>
+    <path fill="#3B3B3B" fill-rule="evenodd" d="M19.64 19.93h-1.715a.75.75 0 0 1-.475-.145.82.82 0 0 1-.268-.359l-.89-2.433h-4.943l-.89 2.433a.78.78 0 0 1-.26.347.73.73 0 0 1-.475.157H8L12.686 8h2.269l4.686 11.93Zm-7.721-4.505h3.803l-1.452-3.968a18.048 18.048 0 0 1-.219-.623c-.08-.24-.158-.5-.235-.78-.077.28-.152.542-.227.784a8.742 8.742 0 0 1-.218.635l-1.452 3.952Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/italic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="M18 9V7h-7v2h2.64l-1.22 10H10v2h7v-2h-2.83L15.4 9H18Z"/>
+</svg>

package/lib/assets/icons/line-height.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m5 10 3-3 3 3H9v8h2l-3 3-3-3h2v-8H5Zm8-3h10v2H13V7Zm10 6H13v2h10v-2Zm0 6H13v2h10v-2Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/list-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <rect width="9" height="9" x="9.5" y="9.5" stroke="var(--zw-icon-foreground)" rx="4.5"/>
+</svg>

package/lib/assets/icons/list-decimal.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="M15.108 18.184V19H10.5v-.816h1.842v-5.862c0-.176.006-.354.018-.534l-1.53 1.314a.375.375 0 0 1-.156.084.373.373 0 0 1-.27-.048.318.318 0 0 1-.084-.078l-.336-.462 2.562-2.214h.87v7.8h1.692Zm1.519.156a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
+</svg>

package/lib/assets/icons/list-disc.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <rect width="10" height="10" x="9" y="9" fill="var(--zw-icon-foreground)" rx="5"/>
+</svg>

package/lib/assets/icons/list-latin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="M12.086 9.802h.834v11.292h-.834V9.802Zm2.592 8.538a.8.8 0 0 1 .054-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
+</svg>

package/lib/assets/icons/list-roman.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="m13.664 15.808-1.35-3.498a7.11 7.11 0 0 1-.252-.804c-.084.324-.17.594-.258.81l-1.35 3.492h3.21ZM16.088 19h-.9a.387.387 0 0 1-.252-.078.48.48 0 0 1-.144-.198l-.804-2.076H10.13l-.804 2.076a.421.421 0 0 1-.138.192.383.383 0 0 1-.252.084h-.9l3.438-8.598h1.176L16.088 19Zm.7-.66a.8.8 0 0 1 .053-.294.829.829 0 0 1 .156-.24.77.77 0 0 1 .534-.222.77.77 0 0 1 .696.462c.04.092.06.19.06.294a.744.744 0 0 1-.222.534.692.692 0 0 1-.24.156.73.73 0 0 1-.294.06.73.73 0 0 1-.294-.06.692.692 0 0 1-.396-.39.816.816 0 0 1-.054-.3Z"/>
+</svg>

package/lib/assets/icons/list-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="M9 9h10v10H9z"/>
+</svg>

package/lib/assets/icons/remove-format.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M14.089 6.726a1 1 0 0 1 1.425-.003l6.8 6.882a1 1 0 0 1 .007 1.398L17.2 20.3l-.2.2c-2.2 2.1-5.7 2-7.8-.2l-3.516-3.6a1 1 0 0 1 0-1.399l8.405-8.575Zm1.81 12.674c.1 0 .2 0 .2-.1l4.8-5-6.1-6.2-5 5.1 6.1 6.2Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/reset-styles.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="M14 9.333V6.666l-3.334 3.333L14 13.333v-2.667c2.206 0 4 1.793 4 4s-1.794 4-4 4c-2.207 0-4-1.793-4-4H8.666A5.332 5.332 0 0 0 14 19.999a5.332 5.332 0 0 0 5.333-5.333A5.332 5.332 0 0 0 14 9.333Z"/>
+</svg>

package/lib/assets/icons/strike-through.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="m14 12.731.77.27H20v2H8v-2h2.84a2.892 2.892 0 0 1-.46-.71 3.61 3.61 0 0 1-.29-1.52c0-.484.1-.964.29-1.41a3.5 3.5 0 0 1 .83-1.2 4 4 0 0 1 1.35-.84 4.74 4.74 0 0 1 1.83-.32 6 6 0 0 1 2.11.41 5 5 0 0 1 1.68 1l-.46.88a.69.69 0 0 1-.18.22.41.41 0 0 1-.25.07.69.69 0 0 1-.39-.16 5.551 5.551 0 0 0-.56-.36 4.641 4.641 0 0 0-.8-.36 3.44 3.44 0 0 0-1.14-.16 3.16 3.16 0 0 0-1.11.17 2.29 2.29 0 0 0-.8.45 1.87 1.87 0 0 0-.49.67 2.138 2.138 0 0 0-.11.79c-.023.357.08.711.29 1 .206.267.465.489.76.65.338.187.693.34 1.06.46Zm1.99 6.06c.24-.22.427-.49.55-.79.135-.315.2-.657.19-1h1.74a4.58 4.58 0 0 1-.25 1.38 4 4 0 0 1-.91 1.37 4.231 4.231 0 0 1-1.46.92 5.503 5.503 0 0 1-2 .33 6.13 6.13 0 0 1-2.5-.46 5.66 5.66 0 0 1-1.89-1.31l.54-.88a.61.61 0 0 1 .19-.17.45.45 0 0 1 .25-.07.5.5 0 0 1 .28.1c.128.077.251.16.37.25l.46.33c.19.13.391.243.6.34.245.107.5.191.76.25.328.076.664.11 1 .1a3.67 3.67 0 0 0 1.19-.18c.328-.109.63-.282.89-.51Z" clip-rule="evenodd"/>
+</svg>

package/lib/assets/icons/superscript.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" d="M21.985 8.625h-1.75V9.5h2.625v.875h-3.5v-1.75c0-.481.394-.875.875-.875h1.75v-.875H19.36V6h2.625c.481 0 .875.394.875.875v.875a.878.878 0 0 1-.875.875ZM7.88 20h2.327l2.975-4.742h.105L16.262 20h2.328l-4.069-6.361L18.32 7.75h-2.345l-2.687 4.366h-.105L10.48 7.75H8.15l3.78 5.889L7.88 20Z"/>
+</svg>

package/lib/assets/icons/underline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 28 28">
+    <path fill="var(--zw-icon-foreground)" fill-rule="evenodd" d="M15.4 16.06a3.3 3.3 0 0 1-1.4.29 3.12 3.12 0 0 1-1.39-.29 2.88 2.88 0 0 1-1.05-.81 3.711 3.711 0 0 1-.65-1.25 5.659 5.659 0 0 1-.22-1.6V7H9v5.41a6.89 6.89 0 0 0 .34 2.22 5.29 5.29 0 0 0 1 1.77c.437.501.975.904 1.58 1.18A5 5 0 0 0 14 18a5 5 0 0 0 2.08-.42 4.61 4.61 0 0 0 1.57-1.18 5.27 5.27 0 0 0 1-1.77 6.89 6.89 0 0 0 .35-2.22V7h-1.69v5.41a5.659 5.659 0 0 1-.22 1.59 3.71 3.71 0 0 1-.69 1.25c-.27.34-.61.617-1 .81ZM20 19H8v2h12v-2Z" clip-rule="evenodd"/>
+</svg>

package/lib/components/base/Icon.vue

@@ -1,12 +1,15 @@
 <template>
-    <svg v-bind="iconAttrs" class="zw-icon" :class="iconClasses">
-        <use :href="url" />
-    </svg>
+    <span
+        class="zw-icon"
+        :class="iconClasses"
+        :style="iconStyles"
+        v-html="source"
+    />
 </template>
 
 <script>
 import { computed } from '@vue/composition-api';
-import sprite from '../../assets/icons.svg';
+import { importIcon } from '../../utils';
 
 export default {
     name: 'Icon',
@@ -31,7 +34,7 @@ export default {
     },
 
     setup(props) {
-        const url = computed(() => `${sprite}#${props.name}`);
+        const source = computed(() => importIcon(props.name));
 
         const iconSize = computed(() => {
             if (isNaN(Number(props.size))) return props.size;
@@ -39,8 +42,13 @@ export default {
             return `${props.size}px`;
         });
 
-        const iconAttrs = computed(() => {
-            return props.size ? { width: iconSize.value, height: iconSize.value } : null;
+        const iconStyles = computed(() => {
+            if (!props.size) return null;
+
+            return {
+                '--zw-icon-width': iconSize.value,
+                '--zw-icon-height': iconSize.value
+            };
         });
 
         const iconClasses = computed(() => ({
@@ -48,8 +56,8 @@ export default {
         }));
 
         return {
-            url,
-            iconAttrs,
+            source,
+            iconStyles,
             iconClasses
         };
     }

package/lib/components/base/__tests__/Icon.test.js

@@ -14,32 +14,25 @@ function createComponent({ name, size, isAutoColor } = {}) {
 }
 
 describe('rendering', () => {
-    test('should render url to icon', () => {
-        const wrapper = createComponent({ name: 'close' });
-        const useWrapper = wrapper.find('use');
-
-        expect(useWrapper.attributes('href')).toBe('http://zipify.com/icons.svg#close');
-    });
-
     test('should render without size', () => {
         const wrapper = createComponent({ size: '' });
 
-        expect(wrapper.attributes('width')).toBeFalsy();
-        expect(wrapper.attributes('height')).toBeFalsy();
+        expect(wrapper.element).not.toElementHasStyle('--zw-icon-width');
+        expect(wrapper.element).not.toElementHasStyle('--zw-icon-height');
     });
 
     test('should render size without units', () => {
         const wrapper = createComponent({ size: '12' });
 
-        expect(wrapper.attributes('width')).toBe('12px');
-        expect(wrapper.attributes('height')).toBe('12px');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-width', '12px');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-height', '12px');
     });
 
     test('should percent size', () => {
         const wrapper = createComponent({ size: '12%' });
 
-        expect(wrapper.attributes('width')).toBe('12%');
-        expect(wrapper.attributes('height')).toBe('12%');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-width', '12%');
+        expect(wrapper.element).toElementHasStyle('--zw-icon-height', '12%');
     });
 
     test('should render auto color style', () => {

package/lib/components/toolbar/Toolbar.vue

@@ -37,7 +37,7 @@ export default {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
-    z-index: 999;
+    z-index: 999999;
 }
 
 .zw-toolbar--enter-active,

package/lib/composables/__tests__/useEditor.test.js

@@ -7,20 +7,21 @@ import { NodeFactory } from '../../__tests__/utils';
 
 const TestComponent = {
     name: 'Test',
+
     render() {
         return h(EditorContent, {
             props: { editor: this.editor }
         });
     },
+
     props: ['value'],
 
     setup(props, { emit }) {
         const editor = useEditor({
             content: toRef(props, 'value'),
             extensions: CORE_EXTENSIONS,
-            onChange: (content) => {
-                emit('input', content);
-            }
+            onChange: (content) => emit('input', content),
+            onFocus: () => emit('focus')
         });
 
         return { editor };
@@ -64,4 +65,12 @@ describe('life cycle', () => {
 
         expect(editor.isDestroyed).toBe(true);
     });
+
+    test('should update content on value change', async () => {
+        const { editor, wrapper } = createComponent({ content: '<p>old</p>' });
+
+        await wrapper.setProps({ value: '<p>new</p>' });
+
+        expect(editor.getHTML()).toBe('<p class="zw-style">new</p>');
+    });
 });

package/lib/composables/useEditor.js

@@ -1,20 +1,26 @@
 import { Editor } from '@tiptap/vue-2';
-import { onUnmounted, watch } from '@vue/composition-api';
+import { onUnmounted, watch, reactive } from '@vue/composition-api';
+import { ContentNormalizer } from '../services';
 
-export function useEditor({ content, onChange, onFocus, extensions }) {
-    const editor = new Editor({
-        content: content.value,
+export function useEditor({ content, onChange, extensions }) {
+    const normalizer = new ContentNormalizer();
+
+    const editor = reactive(new Editor({
+        content: normalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
-        onFocus: () => onFocus(),
         extensions
-    });
+    }));
 
     onUnmounted(() => editor.destroy());
 
     watch(content, (value) => {
         const isChanged = JSON.stringify(editor.getJSON()) !== JSON.stringify(value);
 
-        if (isChanged) editor.commands.setContent(value, false);
+        if (isChanged) {
+            const content = normalizer.normalize(value);
+
+            editor.commands.setContent(content, false);
+        }
     });
 
     return editor;

package/lib/composables/useToolbar.js

@@ -1,10 +1,9 @@
 import { createPopper } from '@popperjs/core';
-import { onUnmounted, onMounted, ref } from '@vue/composition-api';
+import { onUnmounted, onMounted, watch } from '@vue/composition-api';
 import { useElementRef } from '../components/base/composables';
 
-export function useToolbar({ wrapperRef, popperRef, offsets }) {
+export function useToolbar({ wrapperRef, popperRef, offsets, isActiveRef }) {
     let toolbar;
-    const isShow = ref(false);
 
     onMounted(() => {
         const wrapperEl = useElementRef(wrapperRef).value;
@@ -22,23 +21,13 @@ export function useToolbar({ wrapperRef, popperRef, offsets }) {
             ]
         });
     });
+    const update = () => toolbar.update();
 
-    onUnmounted(() => {
-        toolbar.destroy();
+    watch(isActiveRef, () => {
+        if (isActiveRef.value) update();
     });
 
-    function hide() {
-        isShow.value = false;
-    }
+    onUnmounted(() => toolbar.destroy());
 
-    function show() {
-        isShow.value = true;
-        this.update();
-    }
-
-    function update() {
-        toolbar.update();
-    }
-
-    return { toolbar, show, hide, update, isShow };
+    return { toolbar, update };
 }

package/lib/extensions/Alignment.js

@@ -19,6 +19,12 @@ export const Alignment = Extension.create({
                 [TextSettings.ALIGNMENT]: {
                     isRequired: false,
 
+                    parseHTML(el) {
+                        const value = el.style.textAlign;
+
+                        return value ? { desktop: value, tablet: value, mobile: value } : null;
+                    },
+
                     renderHTML(attrs) {
                         if (!attrs.alignment) return null;