[SD-980] Storybook POC

.gitignore

@@ -64,3 +64,6 @@ AGENTS.md
 codex.config.json
 perf-baseline-results.json
 .claude
+
+*storybook.log
+storybook-static

e2e-tests/templates/vue/src/App.vue

@@ -1,14 +1,21 @@
 <script setup>
-import 'superdoc/style.css';
+import '@/style.css';
 import BlankDOCX from './data/blank.docx?url';
 import { onMounted, shallowRef } from 'vue';
-import { SuperDoc } from 'superdoc';
+import { SuperDoc } from '@superdoc';
 
 import { CustomMark } from './custom-mark.js';
-import { nextTick } from 'process';
+import process from 'process';
+
+const props = defineProps({
+  filename: String,
+  onReady: Function,
+  superDocConfig: Object,
+});
 
 window.fileData = null;
 const useLayoutEngine = new URLSearchParams(window.location.search).get('layout') === '1';
+
 const superdoc = shallowRef(null);
 const init = async () => {
   if (superdoc.value) superdoc.value.destroy();
@@ -44,6 +51,9 @@ const init = async () => {
             tooltip: 'Insert Custom Mark',
             group: 'center',
             icon: '🎧',
+            attributes: {
+              ariaLabel: 'Insert Custom Mark',
+            },
           },
         ],
       },
@@ -83,9 +93,9 @@ const init = async () => {
     }
   }
 
-  nextTick(() => {
+  process.nextTick(() => {
     if (!config.modules) config.modules = {};
-    superdoc.value = new SuperDoc(config);
+    superdoc.value = new SuperDoc({ ...config, ...props.superDocConfig });
   });
 };
 
@@ -97,6 +107,9 @@ const onReady = () => {
   if (window.superdocReady) {
     window.superdocReady();
   }
+  if (props.onReady) {
+    props.onReady();
+  }
 };
 
 const handleFileChange = async (event) => {
@@ -134,8 +147,11 @@ const onFontsResolved = ({ documentFonts, unsupportedFonts }) => {
   }
 };
 
-onMounted(() => {
-  init();
+onMounted(async () => {
+  if (props.filename) {
+    window.fileData = await getFileObject(props.filename);
+  }
+  await init();
 });
 </script>
 

e2e-tests/templates/vue/src/custom-mark.js

@@ -1,4 +1,4 @@
-import { Extensions } from 'superdoc/super-editor';
+import { Extensions } from '@';
 
 const { Attribute } = Extensions;
 export const CustomMark = Extensions.Mark.create({

e2e-tests/templates/vue/vite.config.js

@@ -7,4 +7,10 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['superdoc'],
   },
+  resolve: {
+    alias: {
+      '@': 'superdoc/super-editor',
+      '@superdoc': 'superdoc',
+    },
+  },
 })

eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from '@eslint/js';
 import tseslint from 'typescript-eslint';
 import prettierConfig from 'eslint-config-prettier';
@@ -176,4 +179,5 @@ export default [
       '@typescript-eslint/no-empty-object-type': 'off',
     },
   },
+  ...storybook.configs["flat/recommended"],
 ];