ljmotta/Base64PngPageEnvelopeLocator.tsx

## base64png-editor.html
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    html,
    body,
    div#envelope-app {
        margin: 0;
        border: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
  </style>

  <title></title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <div id="envelope-app"></div>
  <script src="base64-editor.js"></script>
</body>
</html>

## base64png-init.ts
import { init } from "@kogito-tooling/editor/dist/envelope";
import { ChannelType, getOperatingSystem } from "@kogito-tooling/channel-common-api";
import { CompositeEditorFactory } from "@kogito-tooling/editor/dist/envelope";
import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api";
import { Base64PngEditorFactory } from "base64png-editor";

init({
  container: document.getElementById("envelope-app")!,
  bus: {
    postMessage<D, Type>(message: EnvelopeBusMessage<D, Type>, targetOrigin?: string, _?: any) {
      window.parent.postMessage(message, "*", _);
    }
  },
  editorFactory: new CompositeEditorFactory([new Base64PngEditorFactory()]),
  editorContext: { channel: ChannelType.EMBEDDED, operatingSystem: getOperatingSystem() }
});

## Base64PngPageEnvelopeLocator.tsx
import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/api";

export function Base64PngPage() {
  ...

  const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
    return {
      targetOrigin: window.location.origin,
      mapping: new Map([
        [
          "base64png",
          {
            resourcesPathPrefix: `envelope/`,
            envelopePath: `envelope/base64-editor.html`,
          },
        ],
      ]),
    };
  }, []);

  ...
}

## Base64PngPageFile.tsx
import { File } from "@kogito-tooling/editor/dist/embedded";

export function Base64PngPage() {
  const [file, setFile] = useState<File>({
    fileName: "new-file",
    fileExtension: "base64png",
    getFileContents: () => Promise.resolve(""),
    isReadOnly: false,
  });

  ...
}

## Base64PngPageRender.tsx
import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/embedded";

export function Base64PngPage() {
  ...

  return (
    <Page>
      <div className={"webapp--page-main-div"}>
        <Base64PngGallery setFile={setFile} />
        <EmbeddedEditor
          file={file}
          editorEnvelopeLocator={editorEnvelopeLocator}
          channelType={ChannelType.EMBEDDED}
          locale={"en"}
        />
      </div>
    </Page>
  );
}

## BpmnEnvelopeLocator.tsx
const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
  return {
    targetOrigin: window.location.origin,
    mapping: new Map([
      [
        "bpmn",
        {
          resourcesPathPrefix: "https://kiegroup.github.io/kogito-online/editors/0.6.1/bpmn",
          envelopePath: "https://kiegroup.github.io/kogito-online/editors/0.6.1/envelope",
        },
      ],
      [
        "bpmn2",
        {
          resourcesPathPrefix: "https://kiegroup.github.io/kogito-online/editors/0.6.1/bpmn2",
          envelopePath: "https://kiegroup.github.io/kogito-online/editors/0.6.1/envelope",
        },
      ],
    ]),
  };
}, []);

## DmnPageEnvelopeLocator.tsx
import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/api";

export function DmnPage() {
   const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
    return {
      targetOrigin: window.location.origin,
      mapping: new Map([
        [
          "dmn",
          {
            resourcesPathPrefix: "../gwt-editors/dmn/",
            envelopePath: "envelope/gwt-editors.html",
          },
        ],
      ]),
    };
  }, []);

  ...
}

## DmnPageFile.tsx
import { File } from "@kogito-tooling/editor/dist/embedded";

export function DmnPage() {
   const [file, setFile] = useState<File>({
    fileName: "new-file",
    fileExtension: "dmn",
    getFileContents: () => Promise.resolve(""),
    isReadOnly: false,
  });

  ...
}

## DmnPageRender.tsx
import { useEditorRef } from "../../__copied-from-kogito-tooling/Hooks";
import { EmbeddedEditor } from "../../__copied-from-kogito-tooling/EmbeddedEditor";

export function DmnPage() {
  ...

  const { editor, ref } = useEditorRef();

  return (
    <Page>
      <div className={"webapp--page-main-div"}>
        <Sidebar
          editor={editor}
          editorEnvelopeLocator={editorEnvelopeLocator}
          file={file}
          setFile={setFile}
          fileExtension={"dmn"}
          accept={".dmn"}
        />
        <EmbeddedEditor
          ref={ref}
          file={file}
          editorEnvelopeLocator={editorEnvelopeLocator}
          channelType={ChannelType.EMBEDDED}
          locale={"en"}
        />
      </div>
    </Page>
  );
}


## gwt-init.ts
editorFactory: new CompositeEditorFactory([new GwtEditorWrapperFactory()])

## ping-pong-view-init.ts
pingPongViewFactory: new PingPongReactImplFactory()

## PingPongPageApi.tsx
import { PingPongChannelApi } from "ping-pong-view/dist/api";

let pings = 0;
let pongs = 0;

export function PingPongViewsPage() {
  const [lastPing, setLastPing] = useState<string>("-");
  const [lastPong, setLastPong] = useState<string>("-");

  const api: PingPongChannelApi = useMemo(() => {
    return {
      pingPongView__ping(source: string) {
        pings++;
        setLastPing(source);
      },
      pingPongView__pong(source: string, replyingTo: string) {
        pongs++;
        setLastPong(source);
      },
    };
  }, [pings, pongs]);

  ...
}

## PingPongPageEmbedded.tsx
<EmbeddedPingPong
  {...api}
  name={"React 1"}
  targetOrigin={window.location.origin}
  mapping={{ title: "Ping-Pong Page in React", envelopePath: "envelope/ping-pong-view-react-impl.html" }}
/>

## todo-list-view-init.ts
import { init } from "todo-list-view/dist/envelope";
import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api";

init({
  container: document.getElementById("envelope-app")!,
  bus: {
    postMessage<D, Type>(message: EnvelopeBusMessage<D, Type>, targetOrigin?: string, transfer?: any) {
      window.parent.postMessage(message, "*", transfer);
    },
  },
});

## TodoListPage.tsx
export function TodoListViewPage() {
  const todoListViewRef = useRef<TodoListApi>(null);

  return (
    <Page>
      <div className={"webapp--page-main-div"}>
        <ActionsSidebar todoListViewRef={todoListViewRef} />
        <PageSection>
          <EmbeddedTodoList
            ref={todoListViewRef}
            targetOrigin={window.location.origin}
            envelopePath={"envelope/todo-list-view.html"}
            todoList__itemRemoved={(item) => window.alert(`Item '${item}' removed successfully!`)}
          />
        </PageSection>
      </div>
    </Page>
  );
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<style>
	html,
	body,
	div#envelope-app {
	margin: 0;
	border: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	width: 100%;
	}
	</style>

	<title></title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
	<div id="envelope-app"></div>
	<script src="base64-editor.js"></script>
	</body>
	</html>
	import { init } from "@kogito-tooling/editor/dist/envelope";
	import { ChannelType, getOperatingSystem } from "@kogito-tooling/channel-common-api";
	import { CompositeEditorFactory } from "@kogito-tooling/editor/dist/envelope";
	import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api";
	import { Base64PngEditorFactory } from "base64png-editor";

	init({
	container: document.getElementById("envelope-app")!,
	bus: {
	postMessage<D, Type>(message: EnvelopeBusMessage<D, Type>, targetOrigin?: string, _?: any) {
	window.parent.postMessage(message, "*", _);
	}
	},
	editorFactory: new CompositeEditorFactory([new Base64PngEditorFactory()]),
	editorContext: { channel: ChannelType.EMBEDDED, operatingSystem: getOperatingSystem() }
	});
	import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/api";

	export function Base64PngPage() {
	...

	const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
	return {
	targetOrigin: window.location.origin,
	mapping: new Map([
	[
	"base64png",
	{
	resourcesPathPrefix: `envelope/`,
	envelopePath: `envelope/base64-editor.html`,
	},
	],
	]),
	};
	}, []);

	...
	}
	import { File } from "@kogito-tooling/editor/dist/embedded";

	export function Base64PngPage() {
	const [file, setFile] = useState<File>({
	fileName: "new-file",
	fileExtension: "base64png",
	getFileContents: () => Promise.resolve(""),
	isReadOnly: false,
	});

	...
	}
	import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/embedded";

	export function Base64PngPage() {
	...

	return (
	<Page>
	<div className={"webapp--page-main-div"}>
	<Base64PngGallery setFile={setFile} />
	<EmbeddedEditor
	file={file}
	editorEnvelopeLocator={editorEnvelopeLocator}
	channelType={ChannelType.EMBEDDED}
	locale={"en"}
	/>
	</div>
	</Page>
	);
	}
	import { EditorEnvelopeLocator } from "@kogito-tooling/editor/dist/api";

	export function DmnPage() {
	const editorEnvelopeLocator: EditorEnvelopeLocator = useMemo(() => {
	return {
	targetOrigin: window.location.origin,
	mapping: new Map([
	[
	"dmn",
	{
	resourcesPathPrefix: "../gwt-editors/dmn/",
	envelopePath: "envelope/gwt-editors.html",
	},
	],
	]),
	};
	}, []);

	...
	}
	import { useEditorRef } from "../../__copied-from-kogito-tooling/Hooks";
	import { EmbeddedEditor } from "../../__copied-from-kogito-tooling/EmbeddedEditor";

	export function DmnPage() {
	...

	const { editor, ref } = useEditorRef();

	return (
	<Page>
	<div className={"webapp--page-main-div"}>
	<Sidebar
	editor={editor}
	editorEnvelopeLocator={editorEnvelopeLocator}
	file={file}
	setFile={setFile}
	fileExtension={"dmn"}
	accept={".dmn"}
	/>
	<EmbeddedEditor
	ref={ref}
	file={file}
	editorEnvelopeLocator={editorEnvelopeLocator}
	channelType={ChannelType.EMBEDDED}
	locale={"en"}
	/>
	</div>
	</Page>
	);
	}
	import { PingPongChannelApi } from "ping-pong-view/dist/api";

	let pings = 0;
	let pongs = 0;

	export function PingPongViewsPage() {
	const [lastPing, setLastPing] = useState<string>("-");
	const [lastPong, setLastPong] = useState<string>("-");

	const api: PingPongChannelApi = useMemo(() => {
	return {
	pingPongView__ping(source: string) {
	pings++;
	setLastPing(source);
	},
	pingPongView__pong(source: string, replyingTo: string) {
	pongs++;
	setLastPong(source);
	},
	};
	}, [pings, pongs]);

	...
	}
	<EmbeddedPingPong
	{...api}
	name={"React 1"}
	targetOrigin={window.location.origin}
	mapping={{ title: "Ping-Pong Page in React", envelopePath: "envelope/ping-pong-view-react-impl.html" }}
	/>
	import { init } from "todo-list-view/dist/envelope";
	import { EnvelopeBusMessage } from "@kogito-tooling/envelope-bus/dist/api";

	init({
	container: document.getElementById("envelope-app")!,
	bus: {
	postMessage<D, Type>(message: EnvelopeBusMessage<D, Type>, targetOrigin?: string, transfer?: any) {
	window.parent.postMessage(message, "*", transfer);
	},
	},
	});