@zipify/wysiwyg 4.11.0-4 → 4.11.1

package/lib/components/toolbar/controls/link/composables/__tests__/useLink.test.js

@@ -1,7 +1,7 @@
 import { ref } from 'vue';
-import { withComponentContext } from '../../../../../../__tests__/utils';
-import { InjectionTokens } from '../../../../../../injectionTokens';
-import { LinkDestinations, LinkTargets } from '../../../../../../enums';
+import { withComponentContext } from '@/__tests__/utils';
+import { InjectionTokens } from '@/injectionTokens';
+import { LinkDestination, LinkTarget } from '@/enums';
 import { useLink } from '../useLink';
 
 const createEditor = (text, destination) => ({
@@ -42,8 +42,8 @@ describe('init link', () => {
 
         link.prepareInitialFields();
 
-        expect(link.currentDestination.value.id).toBe(LinkDestinations.URL);
-        expect(link.linkData.value.target).toBe(LinkTargets.SELF);
+        expect(link.currentDestination.value.id).toBe(LinkDestination.URL);
+        expect(link.linkData.value.target).toBe(LinkTarget.SELF);
         expect(link.destinationHrefs.value).toMatchSnapshot();
     });
 
@@ -66,7 +66,7 @@ describe('actions with link', () => {
     });
 
     test('should update block destination', () => {
-        const link = useComposable('hello world', LinkDestinations.BLOCK);
+        const link = useComposable('hello world', LinkDestination.BLOCK);
 
         link.prepareInitialFields();
         link.updateLink('3456');
@@ -91,9 +91,9 @@ describe('actions with link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: LinkDestinations.URL,
+            destination: LinkDestination.URL,
             href: '/world',
-            target: LinkTargets.SELF,
+            target: LinkTarget.SELF,
             text: 'hello'
         });
     });
@@ -103,7 +103,7 @@ describe('actions with link', () => {
 
         link.updateTarget(false);
 
-        expect(link.linkData.value.target).toBe(LinkTargets.SELF);
+        expect(link.linkData.value.target).toBe(LinkTarget.SELF);
     });
 
     test('should apply link target to current window', () => {
@@ -111,7 +111,7 @@ describe('actions with link', () => {
 
         link.updateTarget(true);
 
-        expect(link.linkData.value.target).toBe(LinkTargets.BLANK);
+        expect(link.linkData.value.target).toBe(LinkTarget.BLANK);
     });
 
     test('should reset destination', () => {
@@ -133,9 +133,9 @@ describe('format link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: LinkDestinations.URL,
+            destination: LinkDestination.URL,
             href: 'https://world.com',
-            target: LinkTargets.SELF,
+            target: LinkTarget.SELF,
             text: 'hello'
         });
     });
@@ -149,9 +149,9 @@ describe('format link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: LinkDestinations.URL,
+            destination: LinkDestination.URL,
             href: 'https://world.com',
-            target: LinkTargets.SELF,
+            target: LinkTarget.SELF,
             text: 'hello'
         });
     });
@@ -165,9 +165,9 @@ describe('format link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: LinkDestinations.URL,
+            destination: LinkDestination.URL,
             href: '/world/new',
-            target: LinkTargets.SELF,
+            target: LinkTarget.SELF,
             text: 'hello'
         });
     });
@@ -181,9 +181,9 @@ describe('format link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: LinkDestinations.URL,
+            destination: LinkDestination.URL,
             href: 'tel:0123456789',
-            target: LinkTargets.SELF,
+            target: LinkTarget.SELF,
             text: 'hello'
         });
     });
@@ -197,9 +197,9 @@ describe('format link', () => {
         link.apply();
 
         expect(link.editor.commands.applyLink).toHaveBeenCalledWith({
-            destination: LinkDestinations.URL,
+            destination: LinkDestination.URL,
             href: 'mailto:example@gmail.com',
-            target: LinkTargets.SELF,
+            target: LinkTarget.SELF,
             text: 'hello'
         });
     });

package/lib/components/toolbar/controls/link/composables/useLink.js

@@ -1,29 +1,29 @@
 import { ref, inject } from 'vue';
-import { LinkTargets, LinkDestinations, TextSettings } from '../../../../../enums';
-import { InjectionTokens } from '../../../../../injectionTokens';
-import { RegExps } from '../../../../../regExps';
+import { LinkTarget, LinkDestination, TextSetting } from '@/enums';
+import { InjectionTokens } from '@/injectionTokens';
+import { RegExps } from '@/regExps';
 
 // TODO NEED refactor it
 export function useLink() {
     const editor = inject(InjectionTokens.EDITOR);
     const pageBlocks = inject(InjectionTokens.PAGE_BLOCKS);
 
-    const linkData = ref({ text: '', target: LinkTargets.SELF, destination: LinkDestinations.URL });
+    const linkData = ref({ text: '', target: LinkTarget.SELF, destination: LinkDestination.URL });
     const destinationHrefs = ref({ block: pageBlocks.value[0].id, url: '' });
-    const currentDestination = ref({ id: LinkDestinations.URL });
+    const currentDestination = ref({ id: LinkDestination.URL });
 
     function updateTarget(isChecked) {
-        linkData.value.target = isChecked ? LinkTargets.BLANK : LinkTargets.SELF;
+        linkData.value.target = isChecked ? LinkTarget.BLANK : LinkTarget.SELF;
     }
 
     function prepareInitialFields() {
         editor.commands.expandSelectionToLink();
         linkData.value.text = editor.commands.getSelectedText();
 
-        const { destination, href, target } = editor.getAttributes(TextSettings.LINK);
+        const { destination, href, target } = editor.getAttributes(TextSetting.LINK);
 
-        currentDestination.value.id = destination || LinkDestinations.URL;
-        linkData.value.target = target || LinkTargets.SELF;
+        currentDestination.value.id = destination || LinkDestination.URL;
+        linkData.value.target = target || LinkTarget.SELF;
         destinationHrefs.value[currentDestination.value.id] = href || '';
     }
 
@@ -33,7 +33,7 @@ export function useLink() {
     }
 
     function getFormattedHref() {
-        if (currentDestination.value.id === LinkDestinations.URL) {
+        if (currentDestination.value.id === LinkDestination.URL) {
             const url = destinationHrefs.value.url;
             const isTelOrMail = RegExps.TEL_PROTOCOL.test(url) || RegExps.MAILTO_PROTOCOL.test(url);
 

package/lib/components/toolbar/controls/link/destination/LinkControlDestination.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <FieldLabel class="zw-margin-bottom--xxs">
-            Destination
+            Click Action
         </FieldLabel>
 
         <Dropdown
@@ -40,7 +40,7 @@
 
 <script setup>
 import { computed, toRef } from 'vue';
-import { LinkDestinations, LinkTargets } from '../../../../../enums';
+import { LinkDestination, LinkTarget } from '@/enums';
 import { Dropdown, DropdownOption, FieldLabel } from '../../../../base';
 import LinkControlPageBlock from './LinkControlPageBlock';
 import LinkControlUrl from './LinkControlUrl';
@@ -60,18 +60,21 @@ const props = defineProps({
 const emit = defineEmits(['reset-errors']);
 
 const destinationTypes = [
-    { id: LinkDestinations.URL, title: 'URL' },
-    { id: LinkDestinations.BLOCK, title: 'Page Section' }
+    { id: LinkDestination.URL, title: 'URL' },
+    { id: LinkDestination.BLOCK, title: 'Page Section' }
 ];
 
 const link = toRef(props, 'link');
-const isURLDestination = computed(() => link.value.currentDestination.value.id === LinkDestinations.URL);
-const isTargetBlank = computed(() => link.value.linkData.value.target === LinkTargets.BLANK);
+const isURLDestination = computed(() => link.value.currentDestination.value.id === LinkDestination.URL);
+const isTargetBlank = computed(() => link.value.linkData.value.target === LinkTarget.BLANK);
 
 const changeDestination = (value) => {
     emit('reset-errors');
     link.value.currentDestination.value.id = value;
-    if (!isURLDestination.value) link.value.target = LinkTargets.SELF;
+
+    if (!isURLDestination.value) {
+        link.value.target = LinkTarget.SELF;
+    }
 
     link.value.destinationHrefs.value.url = '';
 };

package/lib/components/toolbar/controls/link/destination/LinkControlPageBlock.vue

@@ -23,8 +23,8 @@
 
 <script setup>
 import { inject } from 'vue';
+import { InjectionTokens } from '@/injectionTokens';
 import { FieldLabel, DropdownOption, Dropdown } from '../../../../base';
-import { InjectionTokens } from '../../../../../injectionTokens';
 
 defineProps({
     value: {

package/lib/enums/{Alignments.ts → Alignment.ts}

@@ -11,11 +11,3 @@ export const AlignmentList = [
     Alignment.RIGHT,
     Alignment.JUSTIFY
 ];
-
-/**
- * @deprecated Use `Alignment` instead.
- */
-export const Alignments = {
-    ...Alignment,
-    values: AlignmentList
-};

package/lib/enums/{CaseStyles.ts → CaseStyle.ts}

@@ -3,9 +3,3 @@ export enum CaseStyle {
     LOWERCASE = 'lowercase',
     CAPITALIZE = 'capitalize'
 }
-
-/**
- * @deprecated Use `CaseStyle` instead.
- */
-export const CaseStyles = CaseStyle;
-

package/lib/enums/{Devices.ts → Device.ts}

@@ -11,11 +11,3 @@ export const DeviceList = [
     Device.TABLET,
     Device.DESKTOP
 ];
-
-/**
- * @deprecated Use `Device` instead.
- */
-export const Devices = {
-    ...Device,
-    values: DeviceList
-};

package/lib/enums/LinkDestination.ts

@@ -0,0 +1,4 @@
+export enum LinkDestination {
+    URL = 'url',
+    BLOCK = 'block'
+}

package/lib/enums/LinkTarget.ts

@@ -0,0 +1,4 @@
+export enum LinkTarget {
+    BLANK = '_blank',
+    SELF = '_self'
+}

package/lib/enums/{ListTypes.ts → ListType.ts}

@@ -21,12 +21,3 @@ export const ListOrderedTypeList = [
     ListType.ROMAN,
     ListType.LATIN
 ];
-
-/**
- * @deprecated Use `ListType` instead.
- */
-export const ListTypes = {
-    ...ListType,
-    values: ListTypeList,
-    ordered: ListOrderedTypeList
-};

package/lib/enums/MarkGroup.ts

@@ -0,0 +1,4 @@
+export enum MarkGroup {
+    SETTINGS = 'settings',
+    ALL = '_'
+}

package/lib/enums/{NodeTypes.ts → NodeType.ts}

@@ -8,11 +8,3 @@ export enum NodeType {
 }
 
 export const NodeBlockTypeList = [NodeType.PARAGRAPH, NodeType.LIST, NodeType.HEADING];
-
-/**
- * @deprecated Use `NodeType` instead.
- */
-export const NodeTypes = Object.freeze({
-    ...NodeType,
-    blocks: NodeBlockTypeList
-});

package/lib/enums/{TextSettings.ts → TextSetting.ts}

@@ -41,14 +41,3 @@ export const TextBlockMarkList = [
     TextSetting.TEXT_DECORATION,
     TextSetting.SUPERSCRIPT
 ];
-
-/**
- * @deprecated Use `TextSetting` instead.
- */
-export const TextSettings = {
-    ...TextSetting,
-    attributes: TextAttributeSettingList,
-    presetAttributes: TextPresetAttributeSettingList,
-    inlineMarks: TextInlineMarkList,
-    marks: TextBlockMarkList
-};

package/lib/enums/index.ts

@@ -1,9 +1,9 @@
-export * from './Devices';
-export * from './CaseStyles';
-export * from './Alignments';
-export * from './NodeTypes';
-export * from './ListTypes';
-export * from './TextSettings';
-export * from './MarkGroups';
-export * from './LinkTargets';
-export * from './LinkDestinations';
+export * from './Device';
+export * from './CaseStyle';
+export * from './Alignment';
+export * from './NodeType';
+export * from './ListType';
+export * from './TextSetting';
+export * from './MarkGroup';
+export * from './LinkTarget';
+export * from './LinkDestination';

package/lib/extensions/Alignment.js

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
-import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '../utils';
-import { Alignments, NodeTypes, TextSettings } from '../enums';
+import { convertAlignment, createCommand, createKeyboardShortcut, renderInlineSetting } from '@/utils';
+import { Alignment, NodeType, TextSetting } from '@/enums';
 
 const DEFAULTS = {
     mobile: null,
@@ -9,14 +9,14 @@ const DEFAULTS = {
     desktop: null
 };
 
-export const Alignment = Extension.create({
-    name: TextSettings.ALIGNMENT,
+export const AlignmentExtension = Extension.create({
+    name: TextSetting.ALIGNMENT,
 
     addGlobalAttributes: () => [
         {
-            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+            types: [NodeType.PARAGRAPH, NodeType.HEADING],
             attributes: {
-                [TextSettings.ALIGNMENT]: {
+                [TextSetting.ALIGNMENT]: {
                     isRequired: false,
 
                     parseHTML({ style }) {
@@ -71,15 +71,17 @@ export const Alignment = Extension.create({
                 const device = commands.getDevice();
                 const preset = commands.getPreset();
 
-                return computed(() => unref(preset)[unref(device)].alignment ?? Alignments.LEFT);
+                return computed(() => unref(preset)[unref(device)].alignment ?? Alignment.LEFT);
             })
         };
     },
 
     addKeyboardShortcuts: () => ({
-        'Mod-Shift-l': createKeyboardShortcut('applyAlignment', Alignments.LEFT),
-        'Mod-Shift-e': createKeyboardShortcut('applyAlignment', Alignments.CENTER),
-        'Mod-Shift-r': createKeyboardShortcut('applyAlignment', Alignments.RIGHT),
-        'Mod-Shift-j': createKeyboardShortcut('applyAlignment', Alignments.JUSTIFY)
+        'Mod-Shift-l': createKeyboardShortcut('applyAlignment', Alignment.LEFT),
+        'Mod-Shift-e': createKeyboardShortcut('applyAlignment', Alignment.CENTER),
+        'Mod-Shift-r': createKeyboardShortcut('applyAlignment', Alignment.RIGHT),
+        'Mod-Shift-j': createKeyboardShortcut('applyAlignment', Alignment.JUSTIFY)
     })
 });
+
+export { AlignmentExtension as Alignment };

package/lib/extensions/BackgroundColor.js

@@ -1,9 +1,9 @@
 import { Mark } from '@tiptap/vue-3';
 import { convertColor, createCommand, renderMark } from '../utils';
-import { TextSettings } from '../enums';
+import { TextSetting } from '../enums';
 
 export const BackgroundColor = Mark.create({
-    name: TextSettings.BACKGROUND_COLOR,
+    name: TextSetting.BACKGROUND_COLOR,
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/CaseStyle.js

@@ -1,21 +1,21 @@
 import { Extension } from '@tiptap/vue-3';
-import { capitalize, createCommand } from '../utils';
-import { CaseStyles } from '../enums';
+import { capitalize, createCommand } from '@/utils';
+import { CaseStyle } from '@/enums';
 
-export const CaseStyle = Extension.create({
+export const CaseStyleExtension = Extension.create({
     name: 'case_style',
 
     addCommands() {
         return {
             applyCaseStyle: createCommand(({ commands }, value) => {
                 switch (value) {
-                    case CaseStyles.CAPITALIZE:
+                    case CaseStyle.CAPITALIZE:
                         return commands.applyCapitalize();
 
-                    case CaseStyles.LOWERCASE:
+                    case CaseStyle.LOWERCASE:
                         return commands.applyLowerCase();
 
-                    case CaseStyles.UPPERCASE:
+                    case CaseStyle.UPPERCASE:
                         return commands.applyUpperCase();
                 }
             }),
@@ -34,3 +34,5 @@ export const CaseStyle = Extension.create({
         };
     }
 });
+
+export { CaseStyleExtension as CaseStyle };

package/lib/extensions/FontColor.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
-import { convertColor, createCommand, renderMark } from '../utils';
-import { MarkGroups, TextSettings } from '../enums';
+import { convertColor, createCommand, renderMark } from '@/utils';
+import { MarkGroup, TextSetting } from '@/enums';
 
 export const FontColor = Mark.create({
-    name: TextSettings.FONT_COLOR,
-    group: MarkGroups.SETTINGS,
+    name: TextSetting.FONT_COLOR,
+    group: MarkGroup.SETTINGS,
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/FontFamily.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
-import { createCommand, renderMark } from '../utils';
-import { MarkGroups, TextSettings } from '../enums';
+import { createCommand, renderMark } from '@/utils';
+import { MarkGroup, TextSetting } from '@/enums';
 
 export const FontFamily = Mark.create({
-    name: TextSettings.FONT_FAMILY,
-    group: MarkGroups.SETTINGS,
+    name: TextSetting.FONT_FAMILY,
+    group: MarkGroup.SETTINGS,
 
     addOptions: () => ({
         fonts: []
@@ -28,7 +28,7 @@ export const FontFamily = Mark.create({
                     commands.applyFontWeight(fontWeight);
                 }
 
-                const isItalicCustomized = commands.isSettingCustomized(TextSettings.FONT_STYLE).value;
+                const isItalicCustomized = commands.isSettingCustomized(TextSetting.FONT_STYLE).value;
 
                 if (!font.isItalicSupported(fontWeight) && isItalicCustomized) {
                     commands.removeItalic();

package/lib/extensions/FontSize.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { convertFontSize, createCommand, createKeyboardShortcut, renderMark } from '../utils';
-import { MarkGroups, TextSettings } from '../enums';
+import { MarkGroup, TextSetting } from '../enums';
 
 export const FontSize = Mark.create({
-    name: TextSettings.FONT_SIZE,
-    group: MarkGroups.SETTINGS,
+    name: TextSetting.FONT_SIZE,
+    group: MarkGroup.SETTINGS,
 
     addOptions: () => ({
         minSize: 1,

package/lib/extensions/FontStyle.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '@/utils';
-import { MarkGroups, TextSettings } from '@/enums';
+import { MarkGroup, TextSetting } from '@/enums';
 
 export const FontStyle = Mark.create({
-    name: TextSettings.FONT_STYLE,
-    group: MarkGroups.SETTINGS,
+    name: TextSetting.FONT_STYLE,
+    group: MarkGroup.SETTINGS,
 
     addAttributes: () => ({
         italic: { required: true }

package/lib/extensions/FontWeight.js

@@ -1,11 +1,11 @@
 import { Mark } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { createCommand, createKeyboardShortcut, renderMark } from '../utils';
-import { MarkGroups, TextSettings } from '../enums';
+import { MarkGroup, TextSetting } from '../enums';
 
 export const FontWeight = Mark.create({
-    name: TextSettings.FONT_WEIGHT,
-    group: MarkGroups.SETTINGS,
+    name: TextSetting.FONT_WEIGHT,
+    group: MarkGroup.SETTINGS,
 
     addAttributes: () => ({
         value: { required: true }

package/lib/extensions/LineHeight.js

@@ -1,7 +1,7 @@
 import { Extension } from '@tiptap/vue-3';
 import { computed, unref } from 'vue';
 import { createCommand, renderInlineSetting, convertLineHeight } from '../utils';
-import { NodeTypes, TextSettings } from '../enums';
+import { NodeType, TextSetting } from '../enums';
 
 const DEFAULTS = {
     mobile: null,
@@ -10,14 +10,14 @@ const DEFAULTS = {
 };
 
 export const LineHeight = Extension.create({
-    name: TextSettings.LINE_HEIGHT,
+    name: TextSetting.LINE_HEIGHT,
 
     addGlobalAttributes() {
         return [
             {
-                types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+                types: [NodeType.PARAGRAPH, NodeType.HEADING],
                 attributes: {
-                    [TextSettings.LINE_HEIGHT]: {
+                    [TextSetting.LINE_HEIGHT]: {
                         isRequired: false,
 
                         parseHTML: (element) => {

package/lib/extensions/Link.js

@@ -1,12 +1,12 @@
 import Base from '@tiptap/extension-link';
 import { computed, unref } from 'vue';
-import { createCommand } from '../utils';
-import { LinkDestinations, LinkTargets, TextSettings } from '../enums';
-import { NodeFactory } from '../services';
+import { createCommand } from '@/utils';
+import { LinkDestination, LinkTarget, TextSetting } from '@/enums';
+import { NodeFactory } from '@/services';
 import { PasteLinkPlugin } from './proseMirror';
 
 export const Link = Base.extend({
-    name: TextSettings.LINK,
+    name: TextSetting.LINK,
 
     addOptions() {
         return {
@@ -30,23 +30,23 @@ export const Link = Base.extend({
             },
 
             target: {
-                default: LinkTargets.SELF,
-                parseHTML: (element) => element.getAttribute('target') || LinkTargets.SELF
+                default: LinkTarget.SELF,
+                parseHTML: (element) => element.getAttribute('target') || LinkTarget.SELF
             },
 
             destination: {
-                default: LinkDestinations.URL,
+                default: LinkDestination.URL,
 
                 parseHTML: (element) => {
                     const href = element.getAttribute('href');
 
-                    if (!href.startsWith('#')) return LinkDestinations.URL;
+                    if (!href.startsWith('#')) return LinkDestination.URL;
 
                     const id = href.replace('#', '');
                     const blocks = unref(this.options.pageBlocks);
                     const block = blocks.find((block) => block.id === parseInt(id));
 
-                    return block ? LinkDestinations.BLOCK : LinkDestinations.URL;
+                    return block ? LinkDestination.BLOCK : LinkDestination.URL;
                 }
             }
         };
@@ -63,7 +63,7 @@ export const Link = Base.extend({
 
                 if (!commands.getSelectedText()) {
                     return commands.insertContent(NodeFactory.text(attributes.text, [
-                        NodeFactory.mark(TextSettings.LINK, attributes)
+                        NodeFactory.mark(TextSetting.LINK, attributes)
                     ]));
                 }
 
@@ -96,7 +96,7 @@ export const Link = Base.extend({
     },
 
     renderHTML({ HTMLAttributes: attrs }) {
-        const href = attrs.destination === LinkDestinations.BLOCK ? `#${attrs.href}` : attrs.href;
+        const href = attrs.destination === LinkDestination.BLOCK ? `#${attrs.href}` : attrs.href;
         const presetClass = unref(this.options.basePresetClass) + unref(this.options.preset).id;
         const linkAttrs = { href, target: attrs.target, class: `${presetClass} zw-style` };
 

package/lib/extensions/Margin.js

@@ -1,17 +1,17 @@
 import { Extension } from '@tiptap/vue-3';
-import { NodeTypes, TextSettings } from '../enums';
+import { NodeType, TextSetting } from '../enums';
 import { renderInlineSetting } from '../utils';
 
 // Fallback margins in old wysiwyg content
 export const Margin = Extension.create({
-    name: TextSettings.MARGIN,
+    name: TextSetting.MARGIN,
 
     addGlobalAttributes: () => [
         {
-            types: [NodeTypes.PARAGRAPH, NodeTypes.HEADING],
+            types: [NodeType.PARAGRAPH, NodeType.HEADING],
 
             attributes: {
-                [TextSettings.MARGIN]: {
+                [TextSetting.MARGIN]: {
                     isRequired: false,
 
                     parseHTML(el) {