npm - editor-ts - Versions diffs - 0.0.12 → 0.0.13 - Mend

editor-ts 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "editor-ts",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "TypeScript library for editing HTML content with JSON representation",
   "module": "index.ts",
   "main": "index.ts",

package/src/core/iframeCanvas.ts CHANGED Viewed

@@ -4,6 +4,10 @@ export type IframeCanvasBuildOptions = {
   title: string;
   css: string;
   htmlBody: string;
+  headHtml?: string;
+  stylesheets?: string[];
+  inlineStyles?: string[];
+  baseHref?: string;
 };
 function buildWysiwygCss(): string {
@@ -644,10 +648,24 @@ function iframeWysiwygScript() {
 }
 export function buildIframeCanvasSrcdoc(options: IframeCanvasBuildOptions): string {
-  const { title, css, htmlBody } = options;
+  const { title, css, htmlBody, headHtml, stylesheets, inlineStyles, baseHref } = options;
   // Serialize a real function body into the iframe.
   const scriptSource = `(${iframeWysiwygScript.toString()})();`;
+  const safeScriptSource = scriptSource.replace(/<\/script>/gi, '<\\/script>');
+  const stylesheetTags = (stylesheets ?? [])
+    .filter((href) => typeof href === 'string' && href.trim().length > 0)
+    .map((href) => `  <link rel="stylesheet" href="${href}">`)
+    .join('\n');
+  const extraInlineStyles = (inlineStyles ?? [])
+    .filter((style) => typeof style === 'string' && style.trim().length > 0)
+    .map((style) => `  <style>${style}</style>`)
+    .join('\n');
+  const baseTag = baseHref && baseHref.trim().length > 0 ? `  <base href="${baseHref}">` : '';
+  const headHtmlBlock = headHtml ? `\n${headHtml}` : '';
   return `<!DOCTYPE html>
 <html>
@@ -655,18 +673,26 @@ export function buildIframeCanvasSrcdoc(options: IframeCanvasBuildOptions): stri
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${title}</title>
-  <style>${css}</style>
+${baseTag}
+${stylesheetTags}
+  <style data-editorts="page-css">${css}</style>
+${extraInlineStyles}
   <style>${buildWysiwygCss()}</style>
+${headHtmlBlock}
 </head>
 ${htmlBody}
-<script>${scriptSource}</script>
+<script>${safeScriptSource}</script>
 </html>`;
 }
-export function buildIframeCanvasSrcdocFromPage(page: Page): string {
+export function buildIframeCanvasSrcdocFromPage(
+  page: Page,
+  options?: Pick<IframeCanvasBuildOptions, 'headHtml' | 'stylesheets' | 'inlineStyles' | 'baseHref'>
+): string {
   return buildIframeCanvasSrcdoc({
     title: page.getTitle(),
     css: page.getCSS(),
     htmlBody: page.getHTML(),
+    ...options,
   });
 }

package/src/core/init.ts CHANGED Viewed

@@ -1391,7 +1391,7 @@ export function init(config: InitConfig): EditorTsEditor {
   // Build iframe content with WYSIWYG
   // NOTE: this must be built on-demand so refresh() reflects current Page state.
-  const buildIframeContent = () => buildIframeCanvasSrcdocFromPage(page);
+  const buildIframeContent = () => buildIframeCanvasSrcdocFromPage(page, config.iframe);
   // Load content into iframe
@@ -2297,7 +2297,9 @@ export function init(config: InitConfig): EditorTsEditor {
           await workspace.fs.writeFile('page.json', save(), { isModelContentChange: true });
         }
-        const styleEl = iframe.contentDocument?.querySelector('head style') as HTMLStyleElement | null;
+        const styleEl =
+          (iframe.contentDocument?.querySelector('head style[data-editorts="page-css"]') as HTMLStyleElement | null)
+          ?? (iframe.contentDocument?.querySelector('head style') as HTMLStyleElement | null);
         if (styleEl) styleEl.textContent = nextCss;
         await commitSnapshot({ source: 'user', message: 'edit style' });
@@ -2323,7 +2325,9 @@ export function init(config: InitConfig): EditorTsEditor {
           await workspace.fs.writeFile('page.json', save(), { isModelContentChange: true });
         }
-        const styleEl = iframe.contentDocument?.querySelector('head style') as HTMLStyleElement | null;
+        const styleEl =
+          (iframe.contentDocument?.querySelector('head style[data-editorts="page-css"]') as HTMLStyleElement | null)
+          ?? (iframe.contentDocument?.querySelector('head style') as HTMLStyleElement | null);
         if (styleEl) styleEl.textContent = nextCss;
         await commitSnapshot({ source: 'user', message: 'clear style' });

package/src/types.ts CHANGED Viewed

@@ -305,6 +305,9 @@ export interface InitConfig {
   // Required: iframe element ID (user creates this in their HTML)
   iframeId: string;
+  /** Optional: iframe head configuration (runtime only). */
+  iframe?: IframeHeadConfig;
   // Optional: vim mode defaults to false
   vimMode?: boolean;
@@ -578,6 +581,17 @@ export interface InitConfig {
   storage?: StorageConfig;
 }
+export interface IframeHeadConfig {
+  /** Raw HTML injected before </head>. */
+  headHtml?: string;
+  /** External stylesheet URLs injected as <link rel="stylesheet">. */
+  stylesheets?: string[];
+  /** Additional inline <style> contents injected in <head>. */
+  inlineStyles?: string[];
+  /** Optional <base href="..."> for resolving relative URLs. */
+  baseHref?: string;
+}
 export type ShortcutDefinition = {
   key: string;
   action: () => void | Promise<void>;