feat: Version 2

Closes #627, closes #1047

client/src/configs/markdown-plugins/index.js

@@ -0,0 +1,44 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import sup from '@diplodoc/transform/lib/plugins/sup';
+import monospace from '@diplodoc/transform/lib/plugins/monospace';
+import code from '@diplodoc/transform/lib/plugins/code';
+import imsize from '@diplodoc/transform/lib/plugins/imsize';
+import video from '@diplodoc/transform/lib/plugins/video';
+import table from '@diplodoc/transform/lib/plugins/table';
+import note from '@diplodoc/transform/lib/plugins/notes';
+import cut from '@diplodoc/transform/lib/plugins/cut';
+import meta from '@diplodoc/transform/lib/plugins/meta';
+import deflist from '@diplodoc/transform/lib/plugins/deflist';
+/* eslint-disable import/no-unresolved */
+import ins from '@gravity-ui/markdown-editor/markdown-it/ins';
+import mark from '@gravity-ui/markdown-editor/markdown-it/mark';
+import sub from '@gravity-ui/markdown-editor/markdown-it/sub';
+import emoji from '@gravity-ui/markdown-editor/markdown-it/emoji';
+import color from '@gravity-ui/markdown-editor/markdown-it/color';
+import { emojiDefs } from '@gravity-ui/markdown-editor/_/bundle/emoji';
+/* eslint-enable import/no-unresolved */
+
+import link from './link';
+
+export default [
+  ins,
+  mark,
+  sub,
+  (md) => md.use(emoji, { defs: emojiDefs }),
+  color,
+  sup,
+  monospace,
+  code,
+  (md) => md.use(imsize, { enableInlineStyling: true }),
+  video,
+  table,
+  note,
+  cut,
+  meta,
+  deflist,
+  link,
+];

client/src/configs/markdown-plugins/link.js

@@ -0,0 +1,68 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import history from '../../history';
+
+const SAME_SITE_CLASS = 'same-site';
+
+document.addEventListener('click', (event) => {
+  const element = event.target.closest(`a.${SAME_SITE_CLASS}`);
+
+  if (element) {
+    event.preventDefault();
+    history.push(element.href);
+  }
+});
+
+function process(token, nextToken) {
+  const href = token.attrGet('href');
+
+  if (!href) {
+    return;
+  }
+
+  let url;
+  try {
+    url = new URL(href, window.location);
+  } catch {
+    return;
+  }
+
+  const isSameSite = url.origin === window.location.origin;
+  const trimOrigin = isSameSite && nextToken.type === 'text' && nextToken.content === href;
+
+  if (isSameSite) {
+    token.attrSet('class', SAME_SITE_CLASS);
+  } else {
+    token.attrSet('target', '_blank');
+    token.attrSet('rel', 'noreferrer');
+  }
+
+  if (trimOrigin) {
+    nextToken.content = url.pathname; // eslint-disable-line no-param-reassign
+  }
+}
+
+export default (md) => {
+  const plugin = ({ tokens }) => {
+    tokens.forEach((token) => {
+      if (!token.children) {
+        return;
+      }
+
+      token.children.forEach((childrenToken, index) => {
+        if (childrenToken.type === 'link_open') {
+          process(childrenToken, token.children[index + 1]);
+        }
+      });
+    });
+  };
+
+  try {
+    md.core.ruler.before('includes', 'link', plugin);
+  } catch (error) {
+    md.core.ruler.push('link', plugin);
+  }
+};