@zipify/wysiwyg 1.0.0-dev.61 → 1.0.0-dev.64

package/example/ExampleApp.vue

@@ -16,6 +16,11 @@
             Load Content
         </button>
 
+        <label class="zw-readonly-switcher">
+            <input type="checkbox" v-model="isReadonly">
+            readonly
+        </label>
+
         <span>Deployed at {{ updatedAt }}</span>
 
         <Wysiwyg
@@ -23,6 +28,7 @@
             base-list-class="zpa-text__list--"
             base-preset-class="zp ts-"
             default-preset-id="regular-1"
+            link-preset-id="link"
             ref="wswgRef"
             :fonts="fonts"
             :presets="presets"
@@ -31,7 +37,8 @@
             :device="device"
             :page-blocks="pageBlocks"
             :active="isActive"
-            @updateFavoriteColors="updateFavoriteColors"
+            :readonly="isReadonly"
+            @update-favorite-colors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
     </div>
@@ -71,6 +78,7 @@ export default {
         const device = ref('desktop');
         const updatedAt = new Date(ZW_UPDATED_AT).toLocaleString('ua-UA');
         const isActive = ref(false);
+        const isReadonly = ref(false);
 
         const structurePreview = computed(() => {
             const json = JSON.stringify(content.value, null, '  ');
@@ -115,7 +123,8 @@ export default {
             updatedAt,
             presets,
             isActive,
-            pageBlocks
+            pageBlocks,
+            isReadonly
         };
     }
 };
@@ -141,6 +150,16 @@ body {
     margin-right: 20px;
 }
 
+.zw-readonly-switcher {
+    margin-right: 20px;
+    display: inline-flex;
+    align-items: center;
+}
+
+.zw-readonly-switcher input {
+    margin-right: 5px;
+}
+
 .zw-content-structure {
     background-color: #F1F1F1;
     padding: 8px;

package/lib/Wysiwyg.vue

@@ -53,6 +53,11 @@ export default {
             required: true
         },
 
+        linkPresetId: {
+            type: [Number, String],
+            required: true
+        },
+
         basePresetClass: {
             type: String,
             required: true
@@ -102,6 +107,19 @@ export default {
             required: true
         },
 
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+
+        // Temporary until migrations static accordion to sidebar
+        popupMode: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+
         // Requires Window type but it different in iframe and outside
         // eslint-disable-next-line vue/require-prop-types
         window: {
@@ -122,10 +140,11 @@ export default {
         const toolbarRef = ref(null);
         const wysiwygRef = ref(null);
         const wrapperRef = computed(() => wysiwygRef.value?.$el || document.body);
+        const isToolbarActiveRef = computed(() => props.active && !props.readonly);
 
         const toolbar = useToolbar({
             wrapperRef: wysiwygRef,
-            isActiveRef: toRef(props, 'active'),
+            isActiveRef: isToolbarActiveRef,
             offsets: props.toolbarOffsets
         });
         const updateToolbar = () => toolbar.update();
@@ -140,6 +159,7 @@ export default {
         const editor = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
+            isReadonlyRef: toRef(props, 'readonly'),
 
             extensions: buildExtensions({
                 fonts,
@@ -147,6 +167,7 @@ export default {
                 maxFontSize: MAX_FONT_SIZE,
                 presetsRef: toRef(props, 'presets'),
                 defaultPresetId: props.defaultPresetId,
+                linkPresetId: props.linkPresetId,
                 makePresetVariable: props.makePresetVariable,
                 basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
@@ -171,6 +192,7 @@ export default {
         provide(InjectionTokens.LOCAL_STORAGE, new Storage(localStorage));
         provide(InjectionTokens.FAVORITE_COLORS, favoriteColors);
         provide(InjectionTokens.PAGE_BLOCKS, pageBlocks);
+        provide(InjectionTokens.POPUP_MODE, props.popupMode);
 
         return {
             editor,

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

@@ -1,3 +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="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"/>
+    <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/font-color.svg

@@ -1,5 +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="#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"/>
+    <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/components/toolbar/ToolbarFull.vue

@@ -14,20 +14,35 @@
                 <FontColorControl />
                 <BackgroundColorControl />
             </ToolbarGroup>
+
+            <template v-if="isPopupMode">
+                <ToolbarDivider vertical />
+
+                <ToolbarGroup>
+                    <ItalicControl />
+                    <UnderlineControl />
+                    <StrikeThroughControl />
+                    <SuperscriptControl />
+                    <CaseStyleControl />
+                </ToolbarGroup>
+            </template>
         </ToolbarRow>
 
         <ToolbarDivider horizontal />
 
         <ToolbarRow>
-            <ToolbarGroup>
-                <ItalicControl />
-                <UnderlineControl />
-                <StrikeThroughControl />
-                <SuperscriptControl />
-                <CaseStyleControl />
-            </ToolbarGroup>
+            <template v-if="!isPopupMode">
+                <ToolbarGroup>
+                    <ItalicControl />
+                    <UnderlineControl />
+                    <StrikeThroughControl />
+                    <SuperscriptControl />
+                    <CaseStyleControl />
+                </ToolbarGroup>
+
+                <ToolbarDivider vertical />
+            </template>
 
-            <ToolbarDivider vertical />
             <AlignmentControl />
             <ToolbarDivider vertical />
 
@@ -52,6 +67,8 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+import { InjectionTokens } from '../../injectionTokens';
 import ToolbarDivider from './ToolbarDivider';
 import ToolbarRow from './ToolbarRow';
 import ToolbarGroup from './ToolbarGroup';
@@ -97,6 +114,12 @@ export default {
         ListControl,
         RemoveFormatControl,
         LinkControl
+    },
+
+    setup() {
+        const isPopupMode = inject(InjectionTokens.POPUP_MODE);
+
+        return { isPopupMode };
     }
 };
 </script>

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

@@ -1,4 +1,4 @@
-import { h, toRef } from 'vue';
+import { h, ref, toRef } from 'vue';
 import { EditorContent } from '@tiptap/vue-2';
 import { shallowMount } from '@vue/test-utils';
 import { useEditor } from '../useEditor';
@@ -18,6 +18,7 @@ const TestComponent = {
 
     setup(props, { emit }) {
         const editor = useEditor({
+            isReadonlyRef: ref(false),
             content: toRef(props, 'value'),
             extensions: buildCoreExtensions(),
             onChange: (content) => emit('input', content),

package/lib/composables/useEditor.js

@@ -2,7 +2,7 @@ import { Editor } from '@tiptap/vue-2';
 import { onUnmounted, watch, reactive } from 'vue';
 import { ContentNormalizer } from '../services';
 
-export function useEditor({ content, onChange, extensions }) {
+export function useEditor({ content, onChange, extensions, isReadonlyRef }) {
     const editor = reactive(new Editor({
         content: ContentNormalizer.normalize(content.value),
         onUpdate: () => onChange(editor.getJSON()),
@@ -22,5 +22,7 @@ export function useEditor({ content, onChange, extensions }) {
         }
     });
 
+    watch(isReadonlyRef, (isReadonly) => editor.setEditable(!isReadonly), { immediate: true });
+
     return editor;
 }

package/lib/extensions/index.js

@@ -18,7 +18,7 @@ import { buildCoreExtensions } from './core';
 export function buildExtensions(options) {
     const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
     const defaultPreset = getPresetById(options.defaultPresetId);
-    const linkPreset = getPresetById('link');
+    const linkPreset = getPresetById(options.linkPresetId);
 
     return buildCoreExtensions(options).concat([
         StylePreset.configure({

package/lib/injectionTokens.js

@@ -4,5 +4,6 @@ export const InjectionTokens = Object.freeze({
     EDITOR: Symbol('editor'),
     LOCAL_STORAGE: Symbol('localStorage'),
     FAVORITE_COLORS: Symbol('favoriteColors'),
-    PAGE_BLOCKS: Symbol('pageBlocks')
+    PAGE_BLOCKS: Symbol('pageBlocks'),
+    POPUP_MODE: Symbol('popupMode')
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.61",
+  "version": "1.0.0-dev.64",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {