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

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,12 @@ export default {
             required: true
         },
 
+        readonly: {
+            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 +133,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 +152,7 @@ export default {
         const editor = useEditor({
             content: toRef(props, 'value'),
             onChange: (content) => onChange(content),
+            isReadonlyRef: toRef(props, 'readonly'),
 
             extensions: buildExtensions({
                 fonts,
@@ -147,6 +160,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,

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/package.json

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