2023-10-03 12:16:33 +00:00
|
|
|
import { Decoration, EditorState, WidgetType } from "../deps.ts";
|
|
|
|
import type { Client } from "../client.ts";
|
|
|
|
import { decoratorStateField } from "./util.ts";
|
|
|
|
import { PanelConfig } from "../types.ts";
|
|
|
|
import { createWidgetSandboxIFrame } from "../components/widget_sandbox_iframe.ts";
|
|
|
|
|
|
|
|
class IFrameWidget extends WidgetType {
|
2023-11-25 12:40:56 +00:00
|
|
|
widgetHeightCacheKey: string;
|
2023-10-03 12:16:33 +00:00
|
|
|
constructor(
|
|
|
|
readonly editor: Client,
|
|
|
|
readonly panel: PanelConfig,
|
2023-11-25 12:40:56 +00:00
|
|
|
readonly className: string,
|
2023-10-03 12:16:33 +00:00
|
|
|
) {
|
|
|
|
super();
|
2023-11-25 12:40:56 +00:00
|
|
|
this.widgetHeightCacheKey = `${this.editor.currentPage!}#${this.className}`;
|
2023-10-03 12:16:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
toDOM(): HTMLElement {
|
2023-11-25 12:40:56 +00:00
|
|
|
const iframe = createWidgetSandboxIFrame(
|
|
|
|
this.editor,
|
|
|
|
this.widgetHeightCacheKey,
|
|
|
|
this.panel,
|
|
|
|
);
|
|
|
|
iframe.classList.add(this.className);
|
2023-10-03 12:16:33 +00:00
|
|
|
return iframe;
|
|
|
|
}
|
|
|
|
|
2023-11-25 12:40:56 +00:00
|
|
|
get estimatedHeight(): number {
|
|
|
|
const height = this.editor.space.getCachedWidgetHeight(
|
|
|
|
this.widgetHeightCacheKey,
|
|
|
|
);
|
|
|
|
console.log("GOt height", height);
|
|
|
|
return height;
|
|
|
|
}
|
|
|
|
|
2023-10-03 12:16:33 +00:00
|
|
|
eq(other: WidgetType): boolean {
|
|
|
|
return this.panel.html ===
|
|
|
|
(other as IFrameWidget).panel.html &&
|
|
|
|
this.panel.script ===
|
|
|
|
(other as IFrameWidget).panel.script;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-25 12:40:56 +00:00
|
|
|
export function postScriptPrefacePlugin(editor: Client) {
|
2023-10-03 12:16:33 +00:00
|
|
|
return decoratorStateField((state: EditorState) => {
|
|
|
|
const widgets: any[] = [];
|
2023-11-25 12:40:56 +00:00
|
|
|
if (editor.ui.viewState.panels.preface.html) {
|
|
|
|
widgets.push(
|
|
|
|
Decoration.widget({
|
|
|
|
widget: new IFrameWidget(
|
|
|
|
editor,
|
|
|
|
editor.ui.viewState.panels.preface,
|
|
|
|
"sb-preface-iframe",
|
|
|
|
),
|
|
|
|
side: -1,
|
|
|
|
block: true,
|
|
|
|
}).range(0),
|
|
|
|
);
|
|
|
|
}
|
2023-10-03 12:16:33 +00:00
|
|
|
if (editor.ui.viewState.panels.ps.html) {
|
|
|
|
widgets.push(
|
|
|
|
Decoration.widget({
|
|
|
|
widget: new IFrameWidget(
|
|
|
|
editor,
|
|
|
|
editor.ui.viewState.panels.ps,
|
2023-11-25 12:40:56 +00:00
|
|
|
"sb-ps-iframe",
|
2023-10-03 12:16:33 +00:00
|
|
|
),
|
|
|
|
side: 1,
|
|
|
|
block: true,
|
|
|
|
}).range(state.doc.length),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
return Decoration.set(widgets);
|
|
|
|
});
|
|
|
|
}
|