From 576d2215af01ee91c1d5f190a97c31dc6e030933 Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Tue, 24 Mar 2026 15:10:54 +0100
Subject: [PATCH 1/2] feat: export CSS as string module for Shadow DOM
 injection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `@gravity-ui/markdown-editor/styles-string` export — a JS module
that exports all bundled editor styles as a string, enabling injection
into Shadow DOM via `adoptedStyleSheets` or `<style>` tags.

Closes #1026

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/editor/gulpfile.js  | 17 ++++++++++++++++-
 packages/editor/package.json | 10 ++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/editor/gulpfile.js b/packages/editor/gulpfile.js
index ec138f7c7..a7b0c623a 100644
--- a/packages/editor/gulpfile.js
+++ b/packages/editor/gulpfile.js
@@ -1,5 +1,6 @@
 /* global require, __dirname -- Globals defined by Nodejs */
 
+const fs = require('node:fs');
 const path = require('node:path');
 
 const utils = require('@gravity-ui/gulp-utils');
@@ -46,7 +47,21 @@ gulp.task('scss', () => {
         .pipe(gulp.dest(BUILD_DIR));
 });
 
-gulp.task('build', gulp.parallel('ts', 'json', 'scss'));
+gulp.task('styles-string', (done) => {
+    const css = fs.readFileSync(path.join(BUILD_DIR, 'styles.css'), 'utf8');
+    const escaped = css.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+    const content = `\`${escaped}\``;
+
+    fs.writeFileSync(path.join(BUILD_DIR, 'styles-string.js'), `export default ${content};\n`);
+    fs.writeFileSync(path.join(BUILD_DIR, 'styles-string.cjs'), `module.exports = ${content};\n`);
+    fs.writeFileSync(
+        path.join(BUILD_DIR, 'styles-string.d.ts'),
+        `declare const styles: string;\nexport default styles;\n`,
+    );
+    done();
+});
+
+gulp.task('build', gulp.series(gulp.parallel('ts', 'json', 'scss'), 'styles-string'));
 
 gulp.task('default', gulp.series('clean', 'build'));
 
diff --git a/packages/editor/package.json b/packages/editor/package.json
index bb345e27b..41111740a 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -150,6 +150,16 @@
         "default": "./build/cjs/*"
       }
     },
+    "./styles-string": {
+      "import": {
+        "types": "./build/styles-string.d.ts",
+        "default": "./build/styles-string.js"
+      },
+      "require": {
+        "types": "./build/styles-string.d.ts",
+        "default": "./build/styles-string.cjs"
+      }
+    },
     "./styles/*": "./build/esm/styles/*"
   },
   "main": "build/cjs/index.js",

From 15f27a89ad40883802bca5f9588fc6c46f18a8ad Mon Sep 17 00:00:00 2001
From: makhnatkin <makhnatkin@yandex-team.ru>
Date: Wed, 25 Mar 2026 19:48:37 +0100
Subject: [PATCH 2/2] fix: address code review issues in styles-string export

- Use .mjs extension for ESM file to avoid SyntaxError when importing
  from a CJS package root (build/ has no "type": "module")
- Include external CSS from @diplodoc/* packages that are imported
  directly in TS source and not covered by src/**/*.scss compilation:
  transform base/yfm-only, cut, file, tabs, quote-link, folding-headings
- Add smoke test in esbuild-tester.js verifying both CJS require and
  ESM file validity before the bundler compatibility test runs

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/editor/gulpfile.js                   | 22 +++++++++++++++++--
 packages/editor/package.json                  |  2 +-
 .../tests/esbuild-test/esbuild-tester.js      | 14 ++++++++++++
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/editor/gulpfile.js b/packages/editor/gulpfile.js
index a7b0c623a..e0c76ff70 100644
--- a/packages/editor/gulpfile.js
+++ b/packages/editor/gulpfile.js
@@ -48,11 +48,29 @@ gulp.task('scss', () => {
 });
 
 gulp.task('styles-string', (done) => {
-    const css = fs.readFileSync(path.join(BUILD_DIR, 'styles.css'), 'utf8');
+    // External CSS files imported directly from @diplodoc/* packages in TS source.
+    // These are not processed by the 'scss' task and would be missing from styles.css.
+    const externalCssPaths = [
+        require.resolve('@diplodoc/transform/dist/css/base.css'),
+        require.resolve('@diplodoc/transform/dist/css/_yfm-only.css'),
+        require.resolve('@diplodoc/cut-extension/runtime/styles.css'),
+        require.resolve('@diplodoc/file-extension/runtime/styles.css'),
+        require.resolve('@diplodoc/tabs-extension/runtime/styles.css'),
+        require.resolve('@diplodoc/quote-link-extension/runtime/styles.css'),
+        require.resolve('@diplodoc/folding-headings-extension/runtime/styles.css'),
+    ];
+
+    const externalCss = externalCssPaths.map((p) => fs.readFileSync(p, 'utf8')).join('\n');
+    const editorCss = fs.readFileSync(path.join(BUILD_DIR, 'styles.css'), 'utf8');
+    const css = externalCss + '\n' + editorCss;
+
     const escaped = css.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
     const content = `\`${escaped}\``;
 
-    fs.writeFileSync(path.join(BUILD_DIR, 'styles-string.js'), `export default ${content};\n`);
+    // Use .mjs extension: always treated as ESM regardless of package.json "type" field.
+    // A plain .js in the build root (which has no "type": "module") would cause
+    // SyntaxError: Unexpected token 'export' when required as CommonJS.
+    fs.writeFileSync(path.join(BUILD_DIR, 'styles-string.mjs'), `export default ${content};\n`);
     fs.writeFileSync(path.join(BUILD_DIR, 'styles-string.cjs'), `module.exports = ${content};\n`);
     fs.writeFileSync(
         path.join(BUILD_DIR, 'styles-string.d.ts'),
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 41111740a..ea35ae918 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -153,7 +153,7 @@
     "./styles-string": {
       "import": {
         "types": "./build/styles-string.d.ts",
-        "default": "./build/styles-string.js"
+        "default": "./build/styles-string.mjs"
       },
       "require": {
         "types": "./build/styles-string.d.ts",
diff --git a/packages/editor/tests/esbuild-test/esbuild-tester.js b/packages/editor/tests/esbuild-test/esbuild-tester.js
index 3e1e9f447..d80b4cca4 100644
--- a/packages/editor/tests/esbuild-test/esbuild-tester.js
+++ b/packages/editor/tests/esbuild-test/esbuild-tester.js
@@ -38,6 +38,20 @@ const esbuildOptions = {
     alias: ['fs', 'path', 'stream'].reduce((acc, name) => ({...acc, [name]: paths.aliases}), {}),
 };
 
+// Smoke test: verify styles-string export before esbuild bundling test
+const stylesStringCjs = require(path.join(__dirname, '../../build/styles-string.cjs'));
+if (typeof stylesStringCjs !== 'string' || stylesStringCjs.length === 0) {
+    throw new Error('styles-string CJS export is invalid: expected non-empty string');
+}
+const stylesStringMjs = fs.readFileSync(
+    path.join(__dirname, '../../build/styles-string.mjs'),
+    'utf8',
+);
+if (!stylesStringMjs.startsWith('export default `')) {
+    throw new Error('styles-string ESM file is invalid: expected "export default `..."');
+}
+console.log('styles-string smoke test: OK (length:', stylesStringCjs.length, ')');
+
 esbuild
     .build({...esbuildOptions, entryPoints: [paths.esbuildToTest]})
     .then(async () => {