feat(file): replaced own plugin with file-extension (#572)

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@diplodoc/cut-extension": "^0.3.0",
+    "@diplodoc/file-extension": "^0.1.0",
     "@diplodoc/tabs-extension": "^3.5.0",
     "chalk": "^4.1.2",
     "cheerio": "^1.0.0",

src/scss/_yfm-only.scss

@@ -1,12 +1,11 @@
 /**
-    Note: This file excludes "cut" and "tabs" as they are handled separately
-    in dedicated extensions (packages). In the future, "note", "file", "term"
+    Note: This file excludes "cut", "file" and "tabs" as they are handled separately
+    in dedicated extensions (packages). In the future, "note", "term"
     and "table" will also be excluded from this file and moved to yfm.scss,
     once they are moved to separate packages. Direct usage is not recommended,
     as the file is subject to changes without prior notice.
  */
 
 @import 'note';
-@import 'file';
 @import 'table';
 @import 'term';

src/scss/yfm.scss

@@ -2,4 +2,5 @@
 @import 'yfm-only';
 @import 'modal';
 @import '@diplodoc/cut-extension/runtime';
+@import '@diplodoc/file-extension/runtime';
 @import '@diplodoc/tabs-extension/runtime';

src/transform/plugins/file/const.ts

@@ -1,46 +1,14 @@
-export enum FileSpecialAttr {
-    Src = 'src',
-    Name = 'name',
-    Lang = 'lang',
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
-export enum LinkHtmlAttr {
-    Download = 'download',
-    Href = 'href',
-    HrefLang = 'hreflang',
-    Media = 'media',
-    Ping = 'ping',
-    ReferrerPolicy = 'referrerpolicy',
-    Rel = 'rel',
-    Target = 'target',
-    Type = 'type',
-}
-
-export const FILE_TO_LINK_ATTRS_MAP: Record<FileSpecialAttr, LinkHtmlAttr> = {
-    [FileSpecialAttr.Src]: LinkHtmlAttr.Href,
-    [FileSpecialAttr.Name]: LinkHtmlAttr.Download,
-    [FileSpecialAttr.Lang]: LinkHtmlAttr.HrefLang,
-};
-
-export const RULE_NAME = 'yfm_file_inline';
-export const KNOWN_ATTRS: readonly string[] = [
-    FileSpecialAttr.Src,
-    FileSpecialAttr.Name,
-    FileSpecialAttr.Lang,
-    LinkHtmlAttr.ReferrerPolicy,
-    LinkHtmlAttr.Rel,
-    LinkHtmlAttr.Target,
-    LinkHtmlAttr.Type,
-];
-export const REQUIRED_ATTRS: readonly string[] = [FileSpecialAttr.Src, FileSpecialAttr.Name];
-
-export const FILE_TOKEN = 'yfm_file';
-
-export const PREFIX = '{% file ';
+import {FILE_MARKUP_PREFIX} from '@diplodoc/file-extension';
+export {
+    FileSpecialAttr,
+    FILE_TO_LINK_ATTRS_MAP,
+    FILE_REQUIRED_ATTRS as REQUIRED_ATTRS,
+    FILE_TOKEN,
+    FILE_KNOWN_ATTRS as KNOWN_ATTRS,
+    FileClassName,
+    FILE_RULE_NAME as RULE_NAME,
+    FileHtmlAttr as LinkHtmlAttr,
+} from '@diplodoc/file-extension';
+
+export const PREFIX = FILE_MARKUP_PREFIX;
 export const PREFIX_LENGTH = PREFIX.length;
-
-export enum FileClassName {
-    Link = 'yfm-file',
-    Icon = 'yfm-file__icon',
-}

src/transform/plugins/file/file.ts

@@ -1,82 +1 @@
-import type MarkdownIt from 'markdown-it';
-import type ParserInline from 'markdown-it/lib/parser_inline';
-import type Renderer from 'markdown-it/lib/renderer';
-
-import {
-    FILE_TOKEN,
-    FILE_TO_LINK_ATTRS_MAP,
-    FileClassName,
-    FileSpecialAttr,
-    KNOWN_ATTRS,
-    PREFIX,
-    PREFIX_LENGTH,
-    REQUIRED_ATTRS,
-} from './const';
-
-export type FileOptions = {
-    fileExtraAttrs: [string, string][];
-};
-
-export const fileRenderer = (md: MarkdownIt): Renderer.RenderRule => {
-    const iconHtml = `<span class="${md.utils.escapeHtml(FileClassName.Icon)}"></span>`;
-    return (tokens, idx, _opts, _env, self) => {
-        const token = tokens[idx];
-        return `<a${self.renderAttrs(token)}>${iconHtml}${md.utils.escapeHtml(token.content)}</a>`;
-    };
-};
-
-export const fileParser = (_md: MarkdownIt, opts?: FileOptions): ParserInline.RuleInline => {
-    return (state, silent) => {
-        if (state.src.substring(state.pos, state.pos + PREFIX_LENGTH) !== PREFIX) return false;
-
-        // the rest of line after '{% file '
-        const searchStr = state.src.slice(state.pos + PREFIX_LENGTH, state.posMax);
-        // loking for pattern 'src="..." name="..." etc="value" %}'
-        const matchResult = searchStr.match(/^((?:\s*\w+=(?:"[^"]+"|'[^']+')\s)+)\s*%}/);
-        if (!matchResult) return false;
-
-        const paramsGroupLength = matchResult[0].length; // '(src="..." name="...")'.length
-        const paramsStr = matchResult[1]; // 'src="..." name="..."'
-
-        // find pairs of key="foo" or key='bar'
-        const params = paramsStr.match(/\w+=(?:"[^"]+"|'[^']+')/g);
-        if (!params) return false;
-
-        const attrsObj: Record<string, string> = {};
-        params.forEach((param) => {
-            const indexKey = param.indexOf('=');
-            const key = param.slice(0, indexKey);
-            const value = param.slice(indexKey + 2, -1);
-            if (KNOWN_ATTRS.includes(key) && value) {
-                attrsObj[key] = value;
-            }
-        });
-
-        const hasAllRequiredAttrs = REQUIRED_ATTRS.every((attr) => attr in attrsObj);
-        if (!hasAllRequiredAttrs) return false;
-
-        if (!silent) {
-            const token = state.push(FILE_TOKEN, '', 0);
-            token.block = false;
-            token.markup = PREFIX;
-            token.content = attrsObj[FileSpecialAttr.Name];
-            token.attrs = Object.entries(attrsObj);
-            token.attrSet('class', FileClassName.Link);
-
-            for (const attr of token.attrs) {
-                if (attr[0] in FILE_TO_LINK_ATTRS_MAP) {
-                    attr[0] = FILE_TO_LINK_ATTRS_MAP[attr[0] as FileSpecialAttr];
-                }
-            }
-
-            if (Array.isArray(opts?.fileExtraAttrs)) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                token.attrs.push(...opts!.fileExtraAttrs);
-            }
-        }
-
-        state.pos = state.pos + PREFIX_LENGTH + paramsGroupLength;
-
-        return true;
-    };
-};
+export type {PluginOptions as FileOptions} from '@diplodoc/file-extension';

src/transform/plugins/file/index.ts

@@ -1,11 +1,3 @@
-import type {PluginWithOptions} from 'markdown-it';
+import {transform} from '@diplodoc/file-extension';
 
-import {FILE_TOKEN, RULE_NAME} from './const';
-import {FileOptions, fileParser, fileRenderer} from './file';
-
-const filePlugin: PluginWithOptions<FileOptions> = (md, opts) => {
-    md.inline.ruler.push(RULE_NAME, fileParser(md, opts));
-    md.renderer.rules[FILE_TOKEN] = fileRenderer(md);
-};
-
-export = filePlugin;
+export = transform({bundle: false});