@gravity-ui/markdown-editor 13.6.0 → 13.7.0

package/build/esm/extensions/yfm/FoldingHeading/plugins/folding.css

@@ -0,0 +1,51 @@
+.pm-h-folding-hidden {
+  display: none;
+}
+
+.pm-h-folding-content {
+  padding-left: 28px;
+}
+
+.pm-h-folding-separator {
+  position: relative;
+}
+.pm-h-folding-separator::before {
+  position: absolute;
+  z-index: 1;
+  bottom: -4px;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  content: "";
+  background-color: var(--g-color-text-secondary);
+  mask-image: url('data:image/svg+xml;svg,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.25a.75.75 0 0 0 0 1.5h5.69l-2.72 2.72a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 0 0-1.06 1.06l2.72 2.72zm7.47 4.22a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 1 0-1.06 1.06L12.94 8z" clip-rule="evenodd"/></svg>');
+  mask-size: 12px;
+  transform: translateY(80%);
+}
+.pm-h-folding-separator::after {
+  position: absolute;
+  z-index: 1;
+  bottom: -8px;
+  left: 16px;
+  display: block;
+  width: calc(100% - 16px - 56px - 6px);
+  content: "";
+  border-top: 1px dashed var(--g-color-line-generic);
+}
+
+.pm-h-folding-label::after {
+  position: absolute;
+  z-index: 1;
+  right: 2px;
+  bottom: -6px;
+  display: block;
+  padding: 0 8px;
+  content: attr(data-value);
+  color: var(--g-color-text-misc);
+  border-radius: 4px;
+  background-color: var(--g-color-base-misc-medium-hover);
+  transform: translate(0, 50%);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/esm/extensions/yfm/ImgSize/ImagePaste/skeleton.css

@@ -0,0 +1,8 @@
+.g-md-image-skeleton {
+  vertical-align: middle;
+}
+.g-md-image-skeleton__skeleton {
+  width: min(var(--img-skeleton-width) * 1px, 100%);
+  height: min(var(--img-skeleton-height) * 1px, 700px);
+  margin-bottom: -5px;
+}

package/build/esm/extensions/yfm/ImgSize/ImageWidget/view.css

@@ -0,0 +1,12 @@
+.g-md-image-placeholder {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 8px;
+  min-width: 300px;
+  padding: 12px 20px;
+  border-radius: 4px;
+  background-color: var(--g-color-base-simple-hover-solid);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImageForm/ImageForm.css

@@ -0,0 +1,8 @@
+.g-md-image-tooltip-form__input_type_width, .g-md-image-tooltip-form__input_type_height {
+  max-width: 112px;
+}
+.g-md-image-tooltip-form__size-controls {
+  display: flex;
+  align-items: center;
+  gap: 0 16px;
+}

package/build/esm/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgNodeView.css

@@ -0,0 +1,4 @@
+.g-md-img-size-node-view__wrapper {
+  position: relative;
+  display: inline-block;
+}

package/build/esm/extensions/yfm/Mermaid/MermaidNodeView/Mermaid.css

@@ -0,0 +1,33 @@
+.g-md-Mermaid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding: 2px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-Mermaid_edit {
+  display: flex;
+}
+.g-md-Mermaid__Preview {
+  flex: 1;
+}
+.g-md-Mermaid__Error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-Mermaid__Editor {
+  flex: 1;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-Mermaid__EditorPopover {
+  z-index: 1;
+  float: right;
+}
+.g-md-Mermaid__Controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}

package/build/esm/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.css

@@ -0,0 +1,3 @@
+.yfm-cut-title .g-md-yfm-cut-title-inner {
+  cursor: text;
+}

package/build/esm/extensions/yfm/YfmFile/YfmFilePaste/skeleton.css

@@ -0,0 +1,8 @@
+.g-md-file-skeleton {
+  display: inline-flex;
+  align-items: center;
+}
+.g-md-file-skeleton__skeleton {
+  width: 120px;
+  height: 20px;
+}

package/build/esm/extensions/yfm/YfmFile/YfmFileWidget/view.css

@@ -0,0 +1,7 @@
+.g-md-file-placeholder {
+  margin: 0 4px;
+  pointer-events: none;
+}
+.g-md-file-placeholder .yfm-file__icon {
+  margin-right: 8px;
+}

package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.css

@@ -0,0 +1,66 @@
+.g-md-yfm-html-block {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding-top: 28px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-yfm-html-block_editing {
+  display: flex;
+  padding-top: 0;
+  border: 0;
+}
+.g-md-yfm-html-block__label {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.g-md-yfm-html-block__menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.g-md-yfm-html-block__preview {
+  flex: 1;
+}
+.g-md-yfm-html-block__error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-yfm-html-block__editor {
+  flex: 1;
+  width: 50%;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-yfm-html-block__editor .g-text-area__content {
+  font-size: 1em;
+  color: var(--yfm-color-hljs-subst);
+  border: 0;
+  border-radius: var(--g-border-radius-m);
+  background: var(--yfm-color-hljs-background);
+  font-feature-settings: normal;
+}
+.g-md-yfm-html-block__editor .g-text-area__control.g-md-YfmHtmlBlockHelper {
+  font-family: var(--yfm-font-family-monospace);
+}
+.g-md-yfm-html-block__editor-popover {
+  z-index: 1;
+  float: right;
+}
+.g-md-yfm-html-block__controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}
+.g-md-yfm-html-block__content {
+  flex-grow: 1;
+}
+
+.g-root_theme_dark-hc .g-md-yfm-html-block_editing .g-text-area__content,
+.g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
+  color: var(--g-color-text-primary);
+}

package/build/esm/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.css

@@ -0,0 +1,66 @@
+.yfm .yfm-note {
+  max-width: 1296px;
+  margin: 20px 0;
+  padding: 20px 20px 20px 64px;
+  border-radius: 10px;
+}
+.yfm .yfm-note .yfm-note-title {
+  font-weight: 700;
+}
+.yfm .yfm-note > p {
+  margin: 0 0 10px 0;
+}
+.yfm .yfm-note > p:first-child::before {
+  box-sizing: content-box;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin-top: -2px;
+  margin-left: -44px;
+  padding-right: 20px;
+  float: left;
+}
+.yfm .yfm-note > p:last-child {
+  margin-bottom: 0;
+}
+.yfm .yfm-note.yfm-accent-info > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(2,123,243)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-tip > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(86,189,103)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(255,70,69)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-warning > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(241,149,24)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-info {
+  background: rgba(2, 123, 243, 0.08);
+}
+.yfm .yfm-note.yfm-accent-tip {
+  background: rgba(63, 201, 46, 0.1);
+}
+.yfm .yfm-note.yfm-accent-alert {
+  background: rgba(235, 50, 38, 0.08);
+}
+.yfm .yfm-note.yfm-accent-warning {
+  background: rgba(255, 136, 0, 0.15);
+}
+
+.g-md-yfm-note-toolbar {
+  margin: 2px 8px;
+}
+
+.g-md-toolbar-group__s-button_id_note-type-tip {
+  color: #56bd67;
+}
+.g-md-toolbar-group__s-button_id_note-type-info {
+  color: #027bf3;
+}
+.g-md-toolbar-group__s-button_id_note-type-alert {
+  color: #ff4645;
+}
+.g-md-toolbar-group__s-button_id_note-type-warning {
+  color: #f19518;
+}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/view.css

@@ -0,0 +1,83 @@
+.g-md-table-view__hack-strip {
+  position: absolute;
+  left: -13px;
+  display: block;
+  width: 13px;
+  height: 100%;
+  background: transparent;
+}
+.g-md-table-view__wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: calc(100% - 18px);
+  margin-right: 18px;
+  /* stylelint-disable declaration-no-important */
+  margin-bottom: 18px !important;
+}
+.g-md-table-view__buttons-visible .g-md-table-view__plus-button-controls {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-view__plus-button-controls {
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease 50ms;
+}
+.g-md-table-view__plus-button-controls_right {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  right: -18px;
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 100%;
+}
+.g-md-table-view__plus-button-controls_bottom {
+  position: absolute;
+  z-index: 100;
+  bottom: -18px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 16px;
+}
+.g-md-table-view__plus-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.g-md-table-view__plus-button_right {
+  width: 16px;
+  height: 100%;
+}
+.g-md-table-view__plus-button_bottom {
+  width: 100%;
+  height: 16px;
+}
+
+.g-md-table-view.g-md-table-view {
+  z-index: unset;
+  display: block;
+  overflow: auto;
+  box-sizing: content-box;
+  width: fit-content;
+  margin: -13px 0 0 -13px;
+  padding: 13px 0 0 13px;
+  border: none;
+  border-radius: 0;
+  background: transparent !important;
+}
+.g-md-table-view.g-md-table-view tbody {
+  display: block;
+  border-radius: 8px;
+  background: var(--g-color-base-background);
+  box-shadow: inset 0 0 0 1px var(--g-color-line-generic);
+}
+
+.g-md-table-wrapper {
+  display: inline-block;
+  width: 100%;
+  margin-right: 2px;
+}

package/build/esm/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.css

@@ -0,0 +1,37 @@
+.g-md-table-cell-view__left-button {
+  position: absolute;
+  z-index: 110;
+  top: calc(50% - 14px);
+  left: -13px;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+}
+.g-md-table-cell-view__left-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-button {
+  position: absolute;
+  z-index: 110;
+  top: -13px;
+  left: calc(50% - 14px);
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+  transform: rotate(90deg);
+}
+.g-md-table-cell-view__upper-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-visible .g-md-table-cell-view__upper-button {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__left-visible .g-md-table-cell-view__left-button {
+  pointer-events: initial;
+  opacity: 1;
+}

package/build/esm/markup/codemirror/search-plugin/view/SearchPopup.css

@@ -0,0 +1,9 @@
+.g-md-search-card {
+  padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
+}
+.g-md-search-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--g-spacing-1);
+}

package/build/esm/markup/codemirror/yfm.d.ts

@@ -1,4 +1,4 @@
-import { Completion, snippet } from '@codemirror/autocomplete';
+import { Completion, CompletionSource, snippet } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 import { Tag } from '@lezer/highlight';
 export declare const customTags: {
@@ -15,4 +15,11 @@ export declare const yfmCutSnippet: (editor: {
     state: import("@codemirror/state").EditorState;
     dispatch: (tr: import("@codemirror/state").Transaction) => void;
 }, completion: Completion | null, from: number, to: number) => void;
-export declare function yfmLang(): Extension;
+export interface LanguageData {
+    autocomplete: CompletionSource;
+    [key: string]: any;
+}
+export interface YfmLangOptions {
+    languageData?: LanguageData[];
+}
+export declare function yfmLang({ languageData }?: YfmLangOptions): Extension;

package/build/esm/markup/codemirror/yfm.js

@@ -54,7 +54,56 @@ export const yfmNoteSnippets = {
 };
 export const yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
 export const yfmCutSnippet = snippet(yfmCutSnippetTemplate);
-export function yfmLang() {
+const mdAutocomplete = {
+    autocomplete: (context) => {
+        // TODO: add more actions and re-enable
+        // let word = context.matchBefore(/\/.*/);
+        // if (word) {
+        //     return {
+        //         from: word.from,
+        //         options: [
+        //             ...yfmNoteTypes.map<Completion>((type, index) => ({
+        //                 label: `/yfm note ${type}`,
+        //                 displayLabel: `YFM Note ${capitalize(type)}`,
+        //                 type: 'text',
+        //                 apply: yfmNoteSnippets[type],
+        //                 boost: -index,
+        //             })),
+        //             {
+        //                 label: '/yfm cut',
+        //                 displayLabel: 'YFM Cut',
+        //                 type: 'text',
+        //                 apply: yfmCutSnippet,
+        //             },
+        //         ],
+        //     };
+        // }
+        const word = context.matchBefore(/^.*/);
+        if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
+            return {
+                from: word.from,
+                options: [
+                    ...yfmNoteTypes.map((type, index) => ({
+                        label: `{% note ${type}`,
+                        displayLabel: capitalize(type),
+                        type: 'text',
+                        section: 'YFM Note',
+                        apply: yfmNoteSnippets[type],
+                        boost: -index,
+                    })),
+                    {
+                        label: '{% cut',
+                        displayLabel: 'YFM Cut',
+                        type: 'text',
+                        apply: yfmCutSnippet,
+                    },
+                ],
+            };
+        }
+        return null;
+    },
+};
+export function yfmLang({ languageData = [] } = {}) {
     const mdSupport = markdown({
         // defaultCodeLanguage: markdownLanguage,
         base: markdownLanguage,
@@ -62,54 +111,9 @@ export function yfmLang() {
         completeHTMLTags: false,
         extensions: [UnderlineExtension, MonospaceExtension, MarkedExtension],
     });
-    const mdAutocomplete = {
-        autocomplete: (context) => {
-            // TODO: add more actions and re-enable
-            // let word = context.matchBefore(/\/.*/);
-            // if (word) {
-            //     return {
-            //         from: word.from,
-            //         options: [
-            //             ...yfmNoteTypes.map<Completion>((type, index) => ({
-            //                 label: `/yfm note ${type}`,
-            //                 displayLabel: `YFM Note ${capitalize(type)}`,
-            //                 type: 'text',
-            //                 apply: yfmNoteSnippets[type],
-            //                 boost: -index,
-            //             })),
-            //             {
-            //                 label: '/yfm cut',
-            //                 displayLabel: 'YFM Cut',
-            //                 type: 'text',
-            //                 apply: yfmCutSnippet,
-            //             },
-            //         ],
-            //     };
-            // }
-            const word = context.matchBefore(/^.*/);
-            if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
-                return {
-                    from: word.from,
-                    options: [
-                        ...yfmNoteTypes.map((type, index) => ({
-                            label: `{% note ${type}`,
-                            displayLabel: capitalize(type),
-                            type: 'text',
-                            section: 'YFM Note',
-                            apply: yfmNoteSnippets[type],
-                            boost: -index,
-                        })),
-                        {
-                            label: '{% cut',
-                            displayLabel: 'YFM Cut',
-                            type: 'text',
-                            apply: yfmCutSnippet,
-                        },
-                    ],
-                };
-            }
-            return null;
-        },
-    };
-    return [mdSupport, mdSupport.language.data.of(mdAutocomplete)];
+    return [
+        mdSupport,
+        mdSupport.language.data.of(mdAutocomplete),
+        languageData.map((item) => mdSupport.language.data.of(item)),
+    ];
 }

package/build/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '13.6.0' !== 'undefined' ? '13.6.0' : 'unknown';
+export const VERSION = typeof '13.7.0' !== 'undefined' ? '13.7.0' : 'unknown';