adds ace editor example (#35)

contentful · Feb 1, 2018 · a7ed81a · a7ed81a
1 parent 51c5ad2
commit a7ed81a
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 0 deletions.
diff --git a/docs/assets/ace-editor-extension.png b/docs/assets/ace-editor-extension.png
diff --git a/samples/ace-editor/README.md b/samples/ace-editor/README.md
@@ -0,0 +1,20 @@
+Ace editor
+--------------
+
+This extension shows how to implement the powerful [Ace editor](https://ace.c9.io/) as an extension for text fields.
+
+### Installation and usage
+
+Ensure you checked [the samples requirements listed here](../README.md).
+
+![Screenshot of extension](https://github.com/contentful/extensions/raw/master/docs/assets/ace-editor-extension.png)
+
+Install extension for space:
+
+```bash
+export SPACE=<id of space you want to install extension for>
+
+contentful extension create --space-id $SPACE
+```
+
+From this point on, you can use the [other commands](https://github.com/contentful/contentful-cli/tree/master/docs/extension) the contentful-cli provides for extensions.
diff --git a/samples/ace-editor/app.html b/samples/ace-editor/app.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Ace Editor Extension</title>
+    <!--
+    Include styles from the Contentful app.
+
+    See http://contentful.github.io/ui-extensions-sdk/styleguide for information on
+    how to include and apply these styles.
+     -->
+    <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
+    <style>
+      body { margin: 0; }
+      #editor {
+        min-height: 300px;
+      }
+    </style>
+    <!--
+    Load the Extensions API that is used to communicate with the containing app.
+    -->
+    <script src="https://contentful.github.io/ui-extensions-sdk/cf-extension-api.js"></script>
+    <!--
+    We use lodash.throttle to avoid spamming the API with changes
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
+    <!--
+    Include ace editor core script.
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.9/src-min-noconflict/ace.js"></script>
+    <!--
+    Add editor theme and syntax highlighting mode scripts.
+    Find more here: https://www.jsdelivr.com/package/npm/ace-builds?path=src-min
+    -->
+    <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.9/src-min-noconflict/mode-handlebars.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.2.9/src-min-noconflict/theme-monokai.js"></script>
+  </head>
+  <body>
+    <pre id="editor"></pre>
+    <script>
+      // This is the main entry point for extensions.
+      //
+      // The extension API reference explains in detail what you can do with
+      // the 'api' object.
+      var cfExt = window.contentfulExtension || window.contentfulWidget
+      cfExt.init(function (api) {
+        function updateFieldValue () {
+          var value = editor.getValue()
+          api.field.setValue(value)
+        }
+        // Whenever the size of this document changes we adjust the size of
+        // the IFrame in the Contentful App.
+        api.window.startAutoResizer()
+
+        // Get the field value from the UI Extension SDK
+        var value = api.field.getValue() || ''
+        document.getElementById('editor').innerText = value
+
+        // Configure Ace editor
+        var editor = ace.edit('editor')
+        editor.setTheme('ace/theme/monokai')
+        editor.session.setMode('ace/mode/handlebars')
+
+        // Listen to change events and fire an update every 500ms
+        editor.on('change', _.throttle(updateFieldValue, 500, { leading: false }))
+      })
+    </script>
+  </body>
+</html>
diff --git a/samples/ace-editor/extension.json b/samples/ace-editor/extension.json
@@ -0,0 +1,6 @@
+{
+  "id": "ace-editor",
+  "name": "Ace editor",
+  "srcdoc": "./app.html",
+  "fieldTypes": ["Text"]
+}