From 138487bc4da09d5f1a5a902c943556282fdd8965 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Fri, 27 Oct 2023 10:37:51 +0200
Subject: [PATCH] Support basic editors from squidex.

---
 editors/editor-combined.html   |  53 +++++++++++++
 editors/editor-context.html    |  49 ++++++++++++
 editors/editor-dialogs.html    |  77 ++++++++++++++++++
 editors/editor-log.html        | 137 +++++++++++++++++++++++++++++++++
 editors/editor-plain.html      |  73 ++++++++++++++++++
 editors/editor-references.html |  82 ++++++++++++++++++++
 editors/embed-sample.html      |  76 ++++++++++++++++++
 editors/sidebar-content.html   |  45 +++++++++++
 editors/sidebar-context.html   |  45 +++++++++++
 editors/widget-context.html    |  38 +++++++++
 10 files changed, 675 insertions(+)
 create mode 100644 editors/editor-combined.html
 create mode 100644 editors/editor-context.html
 create mode 100644 editors/editor-dialogs.html
 create mode 100644 editors/editor-log.html
 create mode 100644 editors/editor-plain.html
 create mode 100644 editors/editor-references.html
 create mode 100644 editors/embed-sample.html
 create mode 100644 editors/sidebar-content.html
 create mode 100644 editors/sidebar-context.html
 create mode 100644 editors/widget-context.html
diff --git a/editors/editor-combined.html b/editors/editor-combined.html
new file mode 100644
index 0000000..84e6974
--- /dev/null
+++ b/editors/editor-combined.html
@@ -0,0 +1,53 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body>
+    <textarea class="form-control" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        var field = new SquidexFormField();
+
+        // Handle the value change event and set the text to the editor.
+        field.onValueChanged(function (value) {
+            element.value = value || '';
+        });
+
+        // Disable the editor when it should be disabled.
+        field.onDisabled(function (disabled) {
+            element.disabled = disabled;
+        });
+
+        field.onFormValueChanged(function(value) {
+            if (value.a && value.a.iv && value.b && value.b.iv) {
+                element.value = value.a.iv + value.b.iv;
+
+                field.valueChanged(element.value);
+            }
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/editor-context.html b/editors/editor-context.html
new file mode 100644
index 0000000..246992a
--- /dev/null
+++ b/editors/editor-context.html
@@ -0,0 +1,49 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body>
+    <script>
+        function grow(element) {
+            element.style.height = "5px";
+            element.style.height = (element.scrollHeight)+"px";
+        }
+    </script>
+
+    <textarea oninput="grow(this)" class="form-control" name="content" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        var field = new SquidexFormField();
+
+        // Init is called once with a context that contains the app name, schema name and authentication information.
+        field.onInit(function (context) {
+            element.innerHTML = JSON.stringify(context, null, 2);
+
+            grow(element);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/editor-dialogs.html b/editors/editor-dialogs.html
new file mode 100644
index 0000000..52ae544
--- /dev/null
+++ b/editors/editor-dialogs.html
@@ -0,0 +1,77 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <button class="btn btn-outline-secondary" id="alert">
+        ALERT
+    </button>
+
+    <button class="btn btn-outline-secondary" id="info">
+        INFO
+    </button>
+
+    <button class="btn btn-outline-secondary" id="confirm">
+        CONFIRM
+    </button>
+
+    <button class="btn btn-outline-secondary" id="pickAssets">
+        PICK ASSETS
+    </button>
+
+    <button class="btn btn-outline-secondary" id="pickContents">
+        PICK CONTENTS
+    </button>
+
+    <script>
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        //
+        // Furthermore it sends the current size to the parent.
+        var field = new SquidexFormField();
+
+        let selectedContents;
+
+        document.getElementById('alert').addEventListener('click', function () {
+            field.notifyError('ERROR Text');
+        });
+
+        document.getElementById('info').addEventListener('click', function () {
+            field.notifyInfo('INFO Text');
+        });
+
+        document.getElementById('confirm').addEventListener('click', function () {
+            field.confirm('CONFIRM Title', 'CONFIRM Text', function (confirmed) {
+                console.log('CONFIRMED: ' + confirmed);
+            });
+        });
+
+        document.getElementById('pickAssets').addEventListener('click', function () {
+            field.pickAssets(function (assets) {
+                console.log('ASSETS: ' + JSON.stringify(assets, undefined, 2));
+            });
+        });
+
+        document.getElementById('pickContents').addEventListener('click', function () {
+            field.pickContents(undefined, function (contents) {
+                selectedContents = contents.map(x => x.id);
+
+                console.log('ASSETS: ' + JSON.stringify(contents, undefined, 2));
+            }, undefined, selectedContents);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/editor-log.html b/editors/editor-log.html
new file mode 100644
index 0000000..09ae1df
--- /dev/null
+++ b/editors/editor-log.html
@@ -0,0 +1,137 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+            font-family: monospace;
+            font-size: 12px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="mb-2">
+        <button class="btn btn-outline-secondary" id="button">Generate New Value</button>
+    </div>
+
+    <textarea class="form-control" readonly id="textarea"></textarea>
+
+    <script>
+        var numberGenerator = 1;
+
+        // The button to generate a new value.
+        var button = document.getElementById('button');
+
+        var textarea = document.getElementById('textarea');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        var field = new SquidexFormField();
+
+        function logState(message) {
+            var text = '';
+
+            function appendLabel(value) {
+                value += ':';
+
+                text += value.padEnd(20);
+            }
+
+            function appendLine(value) {
+                if (value !== undefined) {
+                    text += value;
+                }
+
+                text += '\n';
+            }
+
+            appendLine(message);
+
+            appendLabel('Language');
+            appendLine(`<${JSON.stringify(field.getLanguage(), 2)}>`);
+
+            appendLabel('Is FullScreen');
+            appendLine(field.isFullscreen());
+
+            appendLabel('Is Expanded');
+            appendLine(field.isExpanded());
+
+            appendLabel('Index');
+            appendLine(field.getIndex());
+
+            appendLabel('Value of Field');
+            appendLine(`<${JSON.stringify(field.getValue(), 2)}>`);
+
+            appendLabel('Value of Form');
+            appendLine(`<${JSON.stringify(field.getFormValue(), 2)}>`);
+
+            appendLabel('Disabled: ');
+            appendLine(field.isDisabled());
+
+            console.log(text);
+
+            if (!textarea.value) {
+                textarea.value = text;
+            } else {
+                textarea.value = textarea.value + '\n---\n\n' + text;
+                textarea.scrollLeft = 0;
+                textarea.scrollTop = textarea.scrollHeight;
+            }
+        }
+
+        logState('Setup');
+
+        if (button) {
+            button.addEventListener('click', function () {
+                numberGenerator++;
+
+                field.valueChanged(numberGenerator);
+
+                logState('Click');
+            });
+        }
+
+        field.onInit(function () {
+            logState('Init');
+        });
+
+        field.onValueChanged(function () {
+            logState('Value changed');
+        });
+
+        field.onFormValueChanged(function () {
+            logState('Form value changed');
+        });
+
+        field.onMoved(function (index) {
+            logState('Form value moved');
+        });
+
+        field.onLanguageChanged(function () {
+            logState('Field language changed');
+        });
+
+        field.onExpanded(function () {
+            logState('Expanded changed');
+        });
+
+        field.onDisabled(function (disabled) {
+            logState(`Disabled: <${JSON.stringify(disabled, 2)}>`);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/editor-plain.html b/editors/editor-plain.html
new file mode 100644
index 0000000..cfc77da
--- /dev/null
+++ b/editors/editor-plain.html
@@ -0,0 +1,73 @@
+<html>
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+
+        textarea {
+            height: 300px;
+        }
+    </style>
+</head>
+
+<body style="margin: 0px; padding: 0px;">
+	<div class="mb-2">
+		<button class="btn btn-outline-secondary" id="expanded">
+			Toggle Expanded
+		</button>
+		<button class="btn btn-outline-secondary" id="fullscreen">
+			Toggle Fullscreen
+		</button>
+	</div>
+
+	<div>
+		<textarea class="form-control" id="editor"></textarea>
+	</div>
+
+	<script>
+		var element = document.getElementById('editor');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+		var field = new SquidexFormField();
+
+		document.getElementById('expanded').addEventListener('click', function () {
+			field.toggleExpanded();
+        });
+
+        document.getElementById('fullscreen').addEventListener('click', function () {
+            field.toggleFullscreen();
+        });
+		
+		field.onValueChanged(function (value) {
+			if (value) {
+				element.value = JSON.stringify(value);
+			} else {
+				element.value = '';
+			}
+		});
+
+		field.onDisabled(function (disabled) {
+			element.disabled = disabled;
+		});
+
+		element.addEventListener('change', function ()  {
+			var value = element.value;
+
+			if (value) {
+				field.valueChanged(JSON.parse(value));
+			} else {
+				field.valueChanged(undefined);
+			}
+		});
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/editors/editor-references.html b/editors/editor-references.html
new file mode 100644
index 0000000..a51b3b8
--- /dev/null
+++ b/editors/editor-references.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <select class="form-select" id="editor">
+        <option></option>
+    </select>
+
+    <script>
+        const element = document.getElementById('editor');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        const field = new SquidexFormField();
+
+        field.onInit(context => {
+            // Fetch the references with a custom filter.
+            fetch(`${context.apiUrl}/content/${context.appName}/references?filter=data/isActive/iv eq true`, {
+                headers: {
+                    Authorization: `Bearer ${context.user.user.access_token}`
+                }
+            })
+            .then(x => x.json())
+            .then(x => {
+                for (var item of x.items) {
+                    // Use the title field as option text.
+                    element.add(new Option(item.data.title.iv, item.id));
+                }
+
+                // Update the value again for the new options.
+                updateValue(field.getValue());
+            });
+        });
+
+        // Handle the value change event and set the text to the editor.
+        field.onValueChanged(function (value) {
+            updateValue(value);
+        });
+
+        // Disable the editor when it should be disabled.
+        field.onDisabled(function (disabled) {
+            updateDisabled(disabled);
+        });
+
+        element.addEventListener('change', event => {
+            if (element.value) {
+                field.valueChanged([element.value]);
+            } else {
+                field.valueChanged([]);
+            }
+        });
+        
+        function updateDisabled(disabled) {
+            element.disabled = disabled;
+        }
+
+        function updateValue(value) {
+            if (Array.isArray(value) && value.length > 0) {
+                element.value = value[0];
+            } else {
+                element.value = undefined;
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/embed-sample.html b/editors/embed-sample.html
new file mode 100644
index 0000000..f6b966e
--- /dev/null
+++ b/editors/embed-sample.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+
+    <style>
+        .element {
+            border: 2px dashed red;
+            border-radius: 0;
+            box-sizing: border-box;
+            padding: 20px;
+            position: fixed;
+            text-align: center;
+            text-decoration: none;
+            width: 200px;
+        }
+
+        .element-left {
+            left: -100px;
+        }
+
+        .element-right {
+            right: -100px;
+        }
+
+        .element-top {
+            top: -30px;
+        }
+
+        .element-bottom {
+            bottom: -30px;
+        }
+
+        .element-left,
+        .element-center,
+        .element-right {
+            top: 50%;
+            margin-top: -30px;
+        }
+
+        .element-top,
+        .element-center,
+        .element-bottom {
+            left: 50%;
+            margin-left: -100px;
+        }
+    </style>
+
+    <script src="embed-sdk.js"></script>
+</head>
+<body>
+    <div class="element element-top" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
+        Top Aligned
+    </div>
+
+    <div class="element element-right" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
+        Right Aligned
+    </div>
+
+    <div class="element element-bottom" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
+        Bottom Aligned
+    </div>
+
+    <div class="element element-left" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
+        Left Aligned
+    </div>
+
+    <div class="element element-center" squidex-token="ewogICJ1IjogImh0dHBzOi8vbG9jYWxob3N0OjUwMDEiLAogICJhIjogInRlc3QiLAogICJzIjogInRlc3QiLAogICJpIjogIjI0ZWQxMWJhLWJjNzItNDMzZS04ODRjLWE0NGE3ODIwYjU1MSIgIAp9">
+        Center
+    </div>
+</body>
+</html>
diff --git a/editors/sidebar-content.html b/editors/sidebar-content.html
new file mode 100644
index 0000000..de643eb
--- /dev/null
+++ b/editors/sidebar-content.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <script>
+        function grow(element) {
+            element.style.height = "5px";
+            element.style.height = (element.scrollHeight)+"px";
+        }
+    </script>
+
+    <textarea class="form-control" oninput="grow(this)" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // When the plugin is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        var plugin = new SquidexPlugin();
+
+        // The content is only available when it is used as a sidebar plugin for single content items.
+        plugin.onContentChanged(function (content) {
+            element.innerHTML = JSON.stringify(content, null, 2);
+
+            grow(element);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/sidebar-context.html b/editors/sidebar-context.html
new file mode 100644
index 0000000..b9bb2a3
--- /dev/null
+++ b/editors/sidebar-context.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <script>
+        function grow(element) {
+            element.style.height = "5px";
+            element.style.height = (element.scrollHeight)+"px";
+        }
+    </script>
+
+    <textarea class="form-control" oninput="grow(this)" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        var plugin = new SquidexPlugin();
+
+        // Init is called once with a context that contains the app name, schema name and authentication information.
+        plugin.onInit(function (context) {
+            element.innerHTML = JSON.stringify(context, null, 2);
+
+            grow(element);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/editors/widget-context.html b/editors/widget-context.html
new file mode 100644
index 0000000..c1b7ad4
--- /dev/null
+++ b/editors/widget-context.html
@@ -0,0 +1,38 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Load the editor sdk from the local folder or https://cloud.squidex.io/scripts/editor-sdk.js -->
+    <script src="editor-sdk.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="https://cloud.squidex.io/styles.css">
+    <style>
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <textarea class="form-control" id="editor"></textarea>
+
+    <script>
+        var element = document.getElementById('editor');
+
+        // When the field is instantiated it notifies the UI that it has been loaded.
+        // 
+        // Furthermore it sends the current size to the parent.
+        var field = new SquidexFormField();
+
+        // Init is called once with a context that contains the app name, schema name and authentication information.
+        field.onInit(function (context) {
+            element.innerHTML = JSON.stringify(context, null, 2);
+
+            grow(element);
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
