@madgex/design-system-ce 5.2.0 → 5.3.0

package/.eslintrc.js

@@ -1,7 +1,14 @@
 module.exports = {
-  extends: ['plugin:vue/essential', '@vue/prettier'],
-  rules: {},
   env: {
     browser: true,
   },
+  extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'prettier'],
+  rules: {
+    'vue/no-v-html': 0,
+    'no-debugger': 0,
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/html-indent': 'off',
+    'vue/html-self-closing': ['error', { html: { void: 'any' } }],
+  },
 };

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.3.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.2.0&sourceBranch=refs/tags/@madgex/design-system-ce@5.3.0) (2022-11-25)
+
+
+### Features
+
+* add link for text editor ([288ad29](https://github.com/projects/MDS/repos/mds-branding/commits/288ad2988076cebddeebab420e3e5438a5d2f818))
+
+
+### Bug Fixes
+
+* automatically apply protocol to textEditor link ([fee5fc7](https://github.com/projects/MDS/repos/mds-branding/commits/fee5fc760d7fc3e01f3bff56022b5fd942cb6d44))
+* remove link editor popover/button ([db6c5f8](https://github.com/projects/MDS/repos/mds-branding/commits/db6c5f8bb64d2a2d44a5ce13b7f4d943664a7aad))
+* remove link editor popover/button ([0b263f8](https://github.com/projects/MDS/repos/mds-branding/commits/0b263f824e7deebd74655aa990e5c1c9e771b831))
+* remove unused code ([b29e960](https://github.com/projects/MDS/repos/mds-branding/commits/b29e96030d7f53242d65335022a2b0af49fff733))
+* texteditor anchor validation ([5e40b46](https://github.com/projects/MDS/repos/mds-branding/commits/5e40b462974a26473d36c2b033de4d1eb606c368))
+* texteditor applyMissingProtocol mailto ([af94428](https://github.com/projects/MDS/repos/mds-branding/commits/af944282bc8f2aa239031a09310112cf0d153924))
+* textEditor link enabled if valid selection ([654dc8d](https://github.com/projects/MDS/repos/mds-branding/commits/654dc8d61d1846e684d3c3cd3b88b84d011cbc87))
+* textEditor link popover spacing ([2236c64](https://github.com/projects/MDS/repos/mds-branding/commits/2236c6442261f05dee13ab82319bc503d9262832))
+* textEditor links always underline ([d7851e3](https://github.com/projects/MDS/repos/mds-branding/commits/d7851e355b1e8dcbbf4c75c6ad8eac8b6c60ed44))
+* textEditor linkUrl i18n, for/id couple ([2cdad01](https://github.com/projects/MDS/repos/mds-branding/commits/2cdad0129cbc5354441ebf1830a7324559386533))
+* textEditor remove auto-focus on open link editor ([1c42419](https://github.com/projects/MDS/repos/mds-branding/commits/1c42419ced20efe5bb0cb1e80221eab509b29645))
+* textEditori18n ([6bf5d03](https://github.com/projects/MDS/repos/mds-branding/commits/6bf5d0352ce1ec77908c03a9e597d8ddbc7f3ba9))
+* textEdtorPopover ([13c39be](https://github.com/projects/MDS/repos/mds-branding/commits/13c39bee9c0d676fa87bf815c64873b92ba9ee7e))
+* tweak text editor link ([32e3992](https://github.com/projects/MDS/repos/mds-branding/commits/32e399236782169c3075a4a2ebc853c6a690f966))
+
+
+
 ## [5.2.0](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.2&sourceBranch=refs/tags/@madgex/design-system-ce@5.2.0) (2022-08-18)
 
 

package/components/text-editor/TextEditor.ce.vue

@@ -13,6 +13,14 @@ export default {
   components: {
     TextEditorContent,
   },
+  provide() {
+    return {
+      iconPath: this.iconpath,
+      id: this.editorid,
+      customMenuButtons: this.customMenuButtons,
+      i18nText: this.i18nText,
+    };
+  },
   props: {
     editorid: {
       type: String,
@@ -45,21 +53,16 @@ export default {
       return this.menuButtons ? JSON.parse(this.menuButtons) : null;
     },
     i18nText() {
-      return this.i18n
-        ? JSON.parse(this.i18n)
-        : {
-            toolbarLabel: 'Text formatting',
-          };
+      const parsedI18n = this.i18n ? JSON.parse(this.i18n) : {};
+      return {
+        toolbarLabel: 'Text formatting',
+        addLink: 'Add link',
+        removeLink: 'Remove link',
+        visuallyHiddenLinkUrlLabel: 'Link url',
+        ...parsedI18n,
+      };
     },
   },
-  provide() {
-    return {
-      iconPath: this.iconpath,
-      id: this.editorid,
-      customMenuButtons: this.customMenuButtons,
-      i18nText: this.i18nText,
-    };
-  },
   mounted() {
     const fallback = document.querySelector(`#text-editor-fallback-${this.editorid}`);
     if (fallback) fallback.remove();

package/components/text-editor/TextEditorContent.vue

@@ -8,6 +8,7 @@
 <script>
 import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-3';
+import Link from '@tiptap/extension-link';
 import TextEditorToolbar from './TextEditorToolbar.vue';
 
 export default {
@@ -46,7 +47,13 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      extensions: [StarterKit],
+      extensions: [
+        StarterKit,
+        Link.configure({
+          protocols: ['http', 'https', 'mailto'], // automatically create links of text with these protocols
+          openOnClick: false,
+        }),
+      ],
       editorProps: {
         attributes: {
           class: 'mds-text-editor__content mds-edited-text',

package/components/text-editor/TextEditorPopover.vue

@@ -0,0 +1,113 @@
+<template>
+  <div ref="popperRef" class="mds-popover" :class="{ 'mds-popover--active': visible }" :aria-hidden="!visible">
+    <div class="mds-popover__arrow" data-popper-arrow />
+    <div class="mds-tooltip__inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { createPopper } from '@popperjs/core';
+import { isNodeSelection, posToDOMRect } from '@tiptap/core';
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  editor: {
+    type: Object,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// eslint-disable-next-line no-undef
+const emit = defineEmits(['update:visible']);
+
+const popperRef = ref(null);
+const instance = ref(undefined);
+
+const baseSize = 4;
+
+const destroy = () => {
+  instance.value?.destroy();
+  instance.value = undefined;
+};
+
+const virtualElement = {
+  getBoundingClientRect: () => {
+    const { view, state } = props.editor;
+    const { ranges } = state.selection;
+    const from = Math.min(...ranges.map((range) => range.$from.pos));
+    const to = Math.max(...ranges.map((range) => range.$to.pos));
+    if (isNodeSelection(state.selection)) {
+      const node = view.nodeDOM(from);
+      if (node) return node.getBoundingClientRect();
+    }
+    return posToDOMRect(view, from, to);
+  },
+};
+
+const initPopper = () => {
+  if (instance.value) destroy();
+  if (!popperRef.value) return;
+  instance.value = createPopper(virtualElement, popperRef.value, {
+    placement: 'bottom',
+    strategy: 'fixed',
+    modifiers: [
+      { name: 'offset', options: { offset: [0, baseSize * 3] } },
+      // arrow will always be at least 5px away from the edge
+      { name: 'arrow', options: { padding: 5 } },
+    ],
+  });
+};
+
+const hideMouseDown = (event) => {
+  if (!popperRef.value?.contains(event.target) && props.visible) {
+    console.log('visiblevisible');
+
+    emit('update:visible', false);
+  }
+};
+const hideKeyDown = (event) => {
+  if (event.keyCode === 27) {
+    emit('update:visible', false);
+  }
+};
+
+const updateInstance = () => instance.value?.update();
+const onEditorFocus = () => {
+  emit('update:visible', false);
+};
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) {
+      updateInstance();
+    }
+  }
+);
+
+onMounted(() => {
+  initPopper();
+  props.editor.on('focus', onEditorFocus);
+  props.editor.on('blur', updateInstance);
+  document.addEventListener('mousedown', hideMouseDown);
+  document.addEventListener('keydown', hideKeyDown);
+});
+
+onUnmounted(() => {
+  props.editor.off('focus', onEditorFocus);
+  props.editor.off('blur', updateInstance);
+  document.removeEventListener('mousedown', hideMouseDown);
+  document.removeEventListener('keydown', hideKeyDown);
+  destroy();
+});
+</script>

package/components/text-editor/TextEditorPopoverLink.vue

@@ -0,0 +1,100 @@
+<template>
+  <TextEditorPopover id="link-editor" v-model:visible="visibleModel" :editor="editor">
+    <div class="mds-grid">
+      <div class="mds-grid-row">
+        <span class="mds-grid-col mds-grid-fit-content">
+          <label class="mds-visually-hidden" for="link-url">{{ i18nText.visuallyHiddenLinkUrlLabel }}</label>
+          <input
+            id="link-url"
+            ref="linkInput"
+            v-model="linkUrlModel"
+            class="mds-form-control"
+            placeholder="example.com"
+          />
+        </span>
+        <span class="mds-grid-col">
+          <button class="mds-button mds-width-full" @click="setLink">{{ i18nText.addLink }}</button>
+          <button class="mds-button mds-button--plain mds-width-full" @click="removeLink">
+            {{ i18nText.removeLink }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </TextEditorPopover>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import TextEditorPopover from './TextEditorPopover.vue';
+import { applyMissingProtocol } from './apply-missing-protocol';
+import { nextTick } from 'process';
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  linkUrl: {
+    type: String,
+    default: '',
+  },
+  editor: {
+    type: Object,
+    required: true,
+  },
+});
+// eslint-disable-next-line no-undef
+const emit = defineEmits(['update:visible', 'update:linkUrl']);
+
+const i18nText = inject('i18nText');
+
+const visibleModel = computed({
+  get() {
+    return props.visible;
+  },
+  set(val) {
+    emit('update:visible', val);
+  },
+});
+const linkUrlModel = computed({
+  get() {
+    return props.linkUrl;
+  },
+  set(val) {
+    emit('update:linkUrl', val);
+  },
+});
+
+const setLink = () => {
+  // cancelled
+  if (linkUrlModel.value === null) {
+    visibleModel.value = false;
+    return;
+  }
+
+  // unset link if empty
+  if (linkUrlModel.value?.trim() === '') {
+    props.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+    visibleModel.value = false;
+    return;
+  }
+  linkUrlModel.value = applyMissingProtocol(linkUrlModel.value);
+
+  // update link
+  nextTick(() => {
+    props.editor
+      .chain()
+      .focus()
+      .extendMarkRange('link')
+      .setLink({ href: linkUrlModel.value })
+      .setTextSelection(0)
+      .run();
+    visibleModel.value = false;
+  });
+};
+const removeLink = () => {
+  props.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+  linkUrlModel.value = false;
+};
+</script>

package/components/text-editor/TextEditorToolbar.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="mds-text-editor__menu" role="toolbar" :aria-label="i18nText.toolbarLabel" :aria-controls="id">
     <TextEditorButton
-      ref="menuButton"
       v-for="button in menuButtons"
-      :key="button.id"
       :id="button.id"
+      ref="menuButton"
+      :key="button.id"
       :label="button.label"
       :icon-name="button.iconName"
-      :isActive="button.isActive?.(editor)"
+      :is-active="button.isActive?.(editor)"
       :disabled="button.isDisabled?.(editor)"
-      :initialTabindex="firstFocusableButton.id === button.id ? 0 : -1"
+      :initial-tabindex="firstFocusableButton.id === button.id ? 0 : -1"
       :aria-pressed="button.id === 'undo' || button.id === 'redo' ? null : button.isActive?.(editor)"
+      :aria-expanded="button.ariaExpanded?.()"
       @click="button.onClick(editor)"
       @keyup.left="setFocusToSibling('previous', $event)"
       @keyup.up="setFocusToSibling('previous', $event)"
@@ -18,19 +19,24 @@
       @keyup.down="setFocusToSibling('next', $event)"
       @update-tab-index="updateTabIndex"
     />
+    <!-- <TextEditorPopoverLink v-if="editor" v-model:linkUrl="linkUrl" v-model:visible="showLinkEditor" :editor="editor" /> -->
   </div>
 </template>
 
 <script>
 import TextEditorButton from './TextEditorButton.vue';
+// import TextEditorPopoverLink from './TextEditorPopoverLink.vue';
 
 export default {
   name: 'TextEditorToolbar',
 
   components: {
     TextEditorButton,
+    // TextEditorPopoverLink,
   },
 
+  inject: ['id', 'customMenuButtons', 'i18nText'],
+
   props: {
     editor: {
       type: Object,
@@ -38,8 +44,6 @@ export default {
     },
   },
 
-  inject: ['id', 'customMenuButtons', 'i18nText'],
-
   data() {
     return {
       defaultMenuButtons: [
@@ -78,6 +82,25 @@ export default {
           onClick: (editor) => editor.commands.toggleOrderedList(),
           isActive: (editor) => editor.isActive('orderedList'),
         },
+        /* {
+          id: 'link',
+          label: 'Link',
+          iconName: 'text-link',
+          ariaExpanded: () => this.showLinkEditor,
+          onClick: (editor) => {
+            if (this.shouldShowLinkEditor()) {
+              // only show the bubble menu for links
+              this.showLinkEditor = true;
+              // update link in text input if we should show it
+              const previousUrl = editor.getAttributes('link').href;
+              this.linkUrl = previousUrl ?? '';
+            }
+          },
+          isActive: (editor) => editor.isActive('link'),
+          isDisabled: () => {
+            return !this.shouldShowLinkEditor();
+          },
+        }, */
         {
           id: 'undo',
           label: 'Undo',
@@ -93,9 +116,10 @@ export default {
           isDisabled: (editor) => !editor.can().redo(),
         },
       ],
+      // showLinkEditor: false,
+      // linkUrl: '',
     };
   },
-
   computed: {
     menuButtons() {
       if (this.customMenuButtons?.length) {
@@ -115,7 +139,6 @@ export default {
       return this.menuButtons.find((button) => !button.isDisabled?.(this.editor));
     },
   },
-
   methods: {
     findSiblings(currentElement, position) {
       let sibling = position === 'previous' ? currentElement.previousElementSibling : currentElement.nextElementSibling;
@@ -144,6 +167,12 @@ export default {
         }
       });
     },
+    /* shouldShowLinkEditor() {
+      // no selection, so cant open link editor
+      const hasSelection = this.editor.state.selection.$from.pos !== this.editor.state.selection.$to.pos;
+      const cursorIsAtLink = this.editor.isActive('link');
+      return hasSelection || cursorIsAtLink;
+    }, */
   },
 };
 </script>

package/components/text-editor/apply-missing-protocol.js

@@ -0,0 +1,7 @@
+const isValidProtocol = (href) => /^https?:\/\/|mailto:/.test(href);
+
+export const applyMissingProtocol = (href) => {
+  const isValid = isValidProtocol(href);
+  if (!isValid) return `http://${href}`;
+  return href;
+};