import { createRichTextEditor, type RichTextEditorOptions } from "ts-rich-text-editor";

const svgIcon = '<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z"></path></svg>';

const config: RichTextEditorOptions = {
  svgCode_mydialog_a: svgIcon,
  toolbar: "mytoolbar",
  toolbar_mytoolbar: "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydialog_a"
    + "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}",
};

const editor = await createRichTextEditor("#div_editor1", config, {
  basePath: "/richtexteditor",
});

// Handle custom dialog command with typed parameters
editor.instance.attachEvent("exec_command_mydialog_a", function (
  state: { returnValue: boolean },
  cmd: string,
  value: any
) {
  state.returnValue = true;
  const editorRef = this;
  const dialoginner = editorRef.createDialog("Insert Paragraph", "rte-dialog-insertcode");
  // ... build dialog UI and handle insert
});

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script>

<div id="div_editor1">
	<p>This example demonstrates how to create a custom dialog.</p>
</div>

<script>
	var editor1cfg = {}
	editor1cfg.svgCode_mydialog_a = '<svg viewBox="-2 -2 20 20" fill="#5F6368" style="width: 100%; height: 100%;"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1z" clip-rule="evenodd"></path></svg>';
	editor1cfg.toolbar = "mytoolbar";
	editor1cfg.toolbar_mytoolbar = "{bold,italic}|{fontname,fontsize}|{forecolor,backcolor}|removeformat|mydialog_a"
		+ "#{undo,redo,fullscreenenter,fullscreenexit,togglemore}";
	var editor1 = new RichTextEditor("#div_editor1", editor1cfg);

	editor1.attachEvent("exec_command_mydialog_a", function (state, cmd, value) {
		state.returnValue = true;//set it has been handled
		console.log("my button clicked");

		var editor = this;

		var dialoginner = editor.createDialog("Insert Paragraph", "rte-dialog-insertcode");

		var div1 = __Append(dialoginner, "div", "position:relative;text-align:center;");
		var textarea = __Append(div1, "textarea", "width:300px;height:200px")

		var divfooter = __Append(dialoginner, "rte-dialog-footer", null, "rte-dialog-footer-center");

		var btn = __Append(divfooter, "rte-dialog-button")
		btn.innerText = "Insert";

		setTimeout(function () {
			textarea.focus();
		}, 300);

		btn.onclick = function () {
			if (!textarea.value.trim())
				return;

			dialoginner.close();

			editor.selectDoc(false);

			var p = editor.insertRootParagraph()
			var ctag = __Append(p, "p");
			ctag.style.cssText = 'margin:12px;padding:12px;border:dashed 1px gray;';
			ctag.innerText = textarea.value;
			editor.focus();

			editor.selectDoc(false);
		}

	});

	function __Append(parent, tagname, csstext, cssclass) {
		var tag = parent.ownerDocument.createElement(tagname);
		if (csstext) tag.style.cssText = csstext;
		if (cssclass) tag.className = cssclass;
		parent.appendChild(tag);
		return tag;
	}
</script>