@madgex/design-system-ce 5.1.2 → 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,55 @@
 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)
+
+
+### Features
+
+* add text editor (wip) ([1d424b3](https://github.com/projects/MDS/repos/mds-branding/commits/1d424b399f1ce71a1db99b644dc72aa650eee1f0))
+* add text editor (wip) ([804cabe](https://github.com/projects/MDS/repos/mds-branding/commits/804cabee541b65e8943a3e29b9c6108313a3400a))
+* manage tabindex in toolbar, add examples and documentation ([74e1442](https://github.com/projects/MDS/repos/mds-branding/commits/74e1442437e9f27580b9f3f56d2c37a3874e98f6))
+* refactoring toolbar, adding keyboard interaction and fixing icons ([b4c5121](https://github.com/projects/MDS/repos/mds-branding/commits/b4c5121ddfd1d1323ac3fb3d87ca52b85470768a))
+
+
+### Bug Fixes
+
+* adding reusable icon vue component + svgs for editor menu ([f8bfaae](https://github.com/projects/MDS/repos/mds-branding/commits/f8bfaae311d607ce1ef15cf65f857b442d1fcbc5))
+* export each custom element separately ([da9f94d](https://github.com/projects/MDS/repos/mds-branding/commits/da9f94de94c6612c8a645855f9e32a6abeee9194))
+* move aria-pressed to toolbar instead of button ([5114f9d](https://github.com/projects/MDS/repos/mds-branding/commits/5114f9dd829ca10a5dbfd88a5784163575c2ac12))
+* removed the disabled attribute to only aria-disabled to avoid focus issue ([2076227](https://github.com/projects/MDS/repos/mds-branding/commits/2076227c8a98c5eb359320271ccf5dc6e6a5bded))
+* trying to separate the text editor from the main js ([db089b8](https://github.com/projects/MDS/repos/mds-branding/commits/db089b8779bbbf0d4a7c1bfbb2de6c9fc20d947d))
+* update filenames ([7ad354f](https://github.com/projects/MDS/repos/mds-branding/commits/7ad354fb77629e738ca55a00f71dc87f365382ae))
+
+
+
 ## [5.1.2](https://github.com/projects/MDS/repos/mds-branding/compare/diff?targetBranch=refs/tags/@madgex/design-system-ce@5.1.1&sourceBranch=refs/tags/@madgex/design-system-ce@5.1.2) (2022-07-12)
 
 **Note:** Version bump only for package @madgex/design-system-ce

package/components/internals/MdsIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <span>
+    <svg aria-hidden="true" focusable="false" class="mds-icon" :class="`mds-icon--${iconName} ${classes}`">
+      <use :href="`${iconPath}#icon-${iconName}`" />
+    </svg>
+    <span v-if="visuallyHiddenLabel" class="mds-visually-hidden">{{ visuallyHiddenLabel }}</span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'MdsIcon',
+  props: {
+    iconName: {
+      type: String,
+      default: '',
+    },
+    classes: {
+      type: String,
+      default: '',
+    },
+    visuallyHiddenLabel: {
+      type: String,
+      default: '',
+    },
+  },
+  inject: ['iconPath'],
+};
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <TextEditorContent v-model="content" />
+    <input type="hidden" :name="editorid" :value="content" />
+  </div>
+</template>
+
+<script>
+import TextEditorContent from './TextEditorContent.vue';
+
+export default {
+  name: 'TextEditor',
+  components: {
+    TextEditorContent,
+  },
+  provide() {
+    return {
+      iconPath: this.iconpath,
+      id: this.editorid,
+      customMenuButtons: this.customMenuButtons,
+      i18nText: this.i18nText,
+    };
+  },
+  props: {
+    editorid: {
+      type: String,
+      required: true,
+    },
+    iconpath: {
+      type: String,
+      default: '/assets/icons.svg',
+    },
+    menuButtons: {
+      type: String,
+      default: '',
+    },
+    i18n: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      content: this.value,
+    };
+  },
+  computed: {
+    customMenuButtons() {
+      return this.menuButtons ? JSON.parse(this.menuButtons) : null;
+    },
+    i18nText() {
+      const parsedI18n = this.i18n ? JSON.parse(this.i18n) : {};
+      return {
+        toolbarLabel: 'Text formatting',
+        addLink: 'Add link',
+        removeLink: 'Remove link',
+        visuallyHiddenLinkUrlLabel: 'Link url',
+        ...parsedI18n,
+      };
+    },
+  },
+  mounted() {
+    const fallback = document.querySelector(`#text-editor-fallback-${this.editorid}`);
+    if (fallback) fallback.remove();
+  },
+};
+</script>

package/components/text-editor/TextEditorButton.vue

@@ -0,0 +1,60 @@
+<template>
+  <button
+    type="button"
+    :title="label"
+    :aria-label="label"
+    class="mds-text-editor__button"
+    :class="{ 'mds-text-editor__button--active': isActive }"
+    :tabindex="tabindex"
+    :aria-disabled="disabled"
+    :aria-pressed="ariaPressed"
+    @focus="$emit('updateTabIndex', id)"
+  >
+    <MdsIcon :icon-name="iconName" />
+  </button>
+</template>
+
+<script>
+import MdsIcon from '../internals/MdsIcon.vue';
+export default {
+  name: 'TextEditorButton',
+  components: {
+    MdsIcon,
+  },
+  emits: ['updateTabIndex'],
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    iconName: {
+      type: String,
+      default: '',
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    initialTabindex: {
+      type: Number,
+      default: -1,
+    },
+    ariaPressed: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      tabindex: this.initialTabindex,
+    };
+  },
+};
+</script>

package/components/text-editor/TextEditorContent.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="mds-text-editor" v-if="editor">
+    <TextEditorToolbar :editor="editor" />
+    <EditorContent :editor="editor" />
+  </div>
+</template>
+
+<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 {
+  name: 'TextEditorContent',
+  components: {
+    EditorContent,
+    TextEditorToolbar,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  inject: ['id'],
+
+  emits: ['update:modelValue'],
+
+  data() {
+    return {
+      editor: null,
+    };
+  },
+
+  watch: {
+    modelValue(value) {
+      const isSame = this.editor.getHTML() === value;
+
+      if (isSame) {
+        return;
+      }
+
+      this.editor.commands.setContent(value, false);
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      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',
+          id: this.id,
+          role: 'textbox',
+          [`aria-labelledby`]: `text-editor-label-${this.id}`,
+        },
+      },
+      content: this.modelValue,
+      onUpdate: () => {
+        this.$emit('update:modelValue', this.editor.getHTML());
+      },
+    });
+  },
+
+  beforeUnmount() {
+    this.editor.destroy();
+  },
+};
+</script>

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>