From 9f209d69a1bb551bd0755dd6b48f260ba6fdd540 Mon Sep 17 00:00:00 2001 From: Yuriy Demidov Date: Wed, 20 Nov 2024 16:23:30 +0300 Subject: [PATCH] feat(file): replaced own plugin with file-extension (#572) --- package-lock.json | 9 +++ package.json | 1 + src/scss/_file.scss | 33 ----------- src/scss/_yfm-only.scss | 5 +- src/scss/yfm.scss | 1 + src/transform/plugins/file/README.md | 34 ------------ src/transform/plugins/file/const.ts | 58 +++++-------------- src/transform/plugins/file/file.ts | 83 +--------------------------- src/transform/plugins/file/index.ts | 12 +--- 9 files changed, 29 insertions(+), 207 deletions(-) delete mode 100644 src/scss/_file.scss delete mode 100644 src/transform/plugins/file/README.md diff --git a/package-lock.json b/package-lock.json index 3aab3e8a..5830b7fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "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", @@ -3079,6 +3080,14 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@diplodoc/file-extension": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@diplodoc/file-extension/-/file-extension-0.1.0.tgz", + "integrity": "sha512-RXiRz3eUyeba5vcAdEI6C6KOoB8Hj8EQru3NFoFCLT4wb6YCFR2qgWDCrLo7Gr1SnIO7UhtCUOiFjnMpwDrSYQ==", + "peerDependencies": { + "markdown-it": "^13.0.0" + } + }, "node_modules/@diplodoc/lint": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@diplodoc/lint/-/lint-1.2.0.tgz", diff --git a/package.json b/package.json index 0db012b0..8cca86f1 100644 --- a/package.json +++ b/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", diff --git a/src/scss/_file.scss b/src/scss/_file.scss deleted file mode 100644 index 52339938..00000000 --- a/src/scss/_file.scss +++ /dev/null @@ -1,33 +0,0 @@ -$defaultIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNjkuOSA5Ny45TDI4NiAxNEMyNzcgNSAyNjQuOC0uMSAyNTIuMS0uMUg0OEMyMS41IDAgMCAyMS41IDAgNDh2NDE2YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDI4OGMyNi41IDAgNDgtMjEuNSA0OC00OFYxMzEuOWMwLTEyLjctNS4xLTI1LTE0LjEtMzR6bS0yMi42IDIyLjdjMi4xIDIuMSAzLjUgNC42IDQuMiA3LjRIMjU2VjMyLjVjMi44LjcgNS4zIDIuMSA3LjQgNC4ybDgzLjkgODMuOXpNMzM2IDQ4MEg0OGMtOC44IDAtMTYtNy4yLTE2LTE2VjQ4YzAtOC44IDcuMi0xNiAxNi0xNmgxNzZ2MTA0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDEwNHYzMDRjMCA4LjgtNy4yIDE2LTE2IDE2em0tNDgtMjQ0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyem0wIDY0djhjMCA2LjYtNS40IDEyLTEyIDEySDEwOGMtNi42IDAtMTItNS40LTEyLTEydi04YzAtNi42IDUuNC0xMiAxMi0xMmgxNjhjNi42IDAgMTIgNS40IDEyIDEyeiIvPjwvc3ZnPg=='); - -/** - Public CSS variables: - --yfm-file-icon sets file icon image - --yfm-file-icon-color sets file icon color -*/ - -.yfm-file { - &__icon { - ---yfm-file-icon-img: var(--yfm-file-icon, #{$defaultIcon}); - - display: inline-block; - user-select: none; - - width: 16px; - margin: 0 2px; - - color: var(--yfm-file-icon-color, --yfm-color-text); - background-color: currentColor; - background-repeat: no-repeat; - background-position: 50%; - background-size: 100%; - - mask-image: var(---yfm-file-icon-img); - mask-position: center; - mask-repeat: no-repeat; - - &::before { - content: '\a0'; - } - } -} diff --git a/src/scss/_yfm-only.scss b/src/scss/_yfm-only.scss index acd5bc81..9d0c8ffb 100644 --- a/src/scss/_yfm-only.scss +++ b/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'; diff --git a/src/scss/yfm.scss b/src/scss/yfm.scss index 24b79e70..2758de0c 100644 --- a/src/scss/yfm.scss +++ b/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'; diff --git a/src/transform/plugins/file/README.md b/src/transform/plugins/file/README.md deleted file mode 100644 index 10c17df5..00000000 --- a/src/transform/plugins/file/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# YFM File plugin - -```md -{% file src="path/to/file" name='readme.md' %} - -==> - -readme.md -``` - -## Attributes - -| Name | Required | Description | -| ---------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | -| `src` | yes | URL of the file. Will be mapped to [`href` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href) | -| `name` | yes | Name of the file. Will be mapped to [`download` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download) | -| `lang` | - | Language of the file content. Will be mapped to [`hreflang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-hreflang) | -| `referrerpolicy` | - | [`referrerpolicy` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-referrerpolicy) | -| `rel` | - | [`rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel) | -| `target` | - | [`target` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) | -| `type` | - | [`type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-type) | - -> _Note: other attributes will be ignored_ - -## Plugin options - -| Name | Type | Description | -| ---------------- | -------------------- | ------------------------------------------------ | -| `fileExtraAttrs` | `[string, string][]` | Adds additional attributes to rendered hyperlink | - -## CSS public variables - -- `--yfm-file-icon` – sets custom file icon image -- `--yfm-file-icon-color` – sets custom file icon color diff --git a/src/transform/plugins/file/const.ts b/src/transform/plugins/file/const.ts index 400f3679..db3f8ff3 100644 --- a/src/transform/plugins/file/const.ts +++ b/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.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', -} diff --git a/src/transform/plugins/file/file.ts b/src/transform/plugins/file/file.ts index 3296fcb1..34a8e2e4 100644 --- a/src/transform/plugins/file/file.ts +++ b/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 = ``; - return (tokens, idx, _opts, _env, self) => { - const token = tokens[idx]; - return `${iconHtml}${md.utils.escapeHtml(token.content)}`; - }; -}; - -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 = {}; - 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'; diff --git a/src/transform/plugins/file/index.ts b/src/transform/plugins/file/index.ts index f075119a..7981b04b 100644 --- a/src/transform/plugins/file/index.ts +++ b/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 = (md, opts) => { - md.inline.ruler.push(RULE_NAME, fileParser(md, opts)); - md.renderer.rules[FILE_TOKEN] = fileRenderer(md); -}; - -export = filePlugin; +export = transform({bundle: false});