ELEMENTS-1124: switch nuxeo-html-editor to Quill

nuxeo · Feb 27, 2020 · 22f60d1 · 22f60d1
1 parent 6d88732
commit 22f60d1
Show file tree

Hide file tree

Showing 46 changed files with 1,134 additions and 2,889 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,7 +1,6 @@
 **/node_modules/
 **/coverage/
 ui/import-href.js
-ui/widgets/alloy/
 ui/widgets/nuxeo-selectivity.js
 ui/viewers/pdfjs
 ui/dataviz/randomColor.js
diff --git a/.prettierignore b/.prettierignore
@@ -1,7 +1,6 @@
 **/node_modules/
 **/coverage/
 ui/import-href.js
-ui/widgets/alloy/
 ui/widgets/nuxeo-selectivity.js
 ui/viewers/pdfjs
 ui/dataviz/randomColor.js
diff --git a/storybook/.storybook/webpack.config.js b/storybook/.storybook/webpack.config.js
@@ -16,6 +16,16 @@ module.exports = ({ config }) => {
       test: /layout.html$/,
       use: 'raw-loader',
     },
+    // expose Quill
+    {
+      test: require.resolve('@nuxeo/quill/dist/quill.js'),
+      use: [
+        {
+          loader: 'expose-loader',
+          options: 'Quill',
+        },
+      ],
+    },
   );
   return config;
 };
diff --git a/storybook/package.json b/storybook/package.json
@@ -26,6 +26,7 @@
     "@storybook/polymer": "^5.1.11",
     "babel-loader": "^8.0.5",
     "highlight.js": "^9.18.0",
+    "expose-loader": "^0.7.5",
     "lit-html": "^1.0.0",
     "nuxeo": "^3.2.1",
     "polymer-webpack-loader": "^2.0.3",

diff --git a/storybook/src/elements/widgets/widgets.stories.js b/storybook/src/elements/widgets/widgets.stories.js
@@ -3,6 +3,7 @@ import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-actions-menu';
 import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-card';
 import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-checkmark';
 import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-date-picker';
+import '@nuxeo/nuxeo-ui-elements/widgets/nuxeo-html-editor';
 import { storiesOf } from '@storybook/polymer';
 import { color, text, number } from '@storybook/addon-knobs';
 import { html } from 'lit-html';
@@ -85,4 +86,11 @@ storiesOf('UI/Widgets', module)
     return html`
       <nuxeo-date-picker .value="${value}"></nuxeo-date-picker>
     `;
-  });
+  })
+
+  .addElement(
+    'nuxeo-html-editor',
+    () => html`
+      <nuxeo-html-editor></nuxeo-html-editor>
+    `,
+  );
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
@@ -1,8 +1,7 @@
 {
   "globals": {
     "d3": false,
-    "AlloyEditor": false,
-    "CKEDITOR": false,
+    "Quill": false,
     "Selectivity": false,
     "saulis": false
   },

diff --git a/ui/demo/nuxeo-demo.js b/ui/demo/nuxeo-demo.js
@@ -66,7 +66,7 @@ window.nuxeo.I18n.loadLocale();
           }
 
           #content {
-            background-color: #efefef;
+            background-color: var(--nuxeo-demo-background-color, #efefef);
             border-radius: 3px;
             padding: 16px;
             margin-bottom: 16px;

diff --git a/ui/demo/nuxeo-html-editor/index.html b/ui/demo/nuxeo-html-editor/index.html
@@ -27,8 +27,12 @@
       import '../nuxeo-demo.js';
       import '../../widgets/nuxeo-html-editor.js';
     </script>
-    <script src="../../widgets/alloy/alloy-editor-all.js"></script>
-    <!-- NXP-23147: explicitly import alloy -->
+
+    <style include="nuxeo-demo-styles">
+      html {
+        --nuxeo-demo-background-color: white;
+      }
+    </style>
   </head>
 
   <body unresolved>

diff --git a/ui/package.json b/ui/package.json
@@ -28,6 +28,7 @@
     "@nuxeo/moment": "^2.24.0",
     "@nuxeo/nuxeo-elements": "3.0.0-SNAPSHOT",
     "@nuxeo/paper-typeahead": "^0.6.0-SNAPSHOT",
+    "@nuxeo/quill": "^2.0.0-dev.3",
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.0",
     "@polymer/iron-flex-layout": "^3.0.0",

diff --git a/ui/test/nuxeo-html-editor.test.js b/ui/test/nuxeo-html-editor.test.js
@@ -0,0 +1,52 @@
+/**
+@license
+(C) Copyright Nuxeo Corp. (http://nuxeo.com/)
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { fixture, isElementVisible, html } from '@nuxeo/nuxeo-elements/test/test-helpers';
+import '../widgets/nuxeo-html-editor.js';
+
+/* eslint-disable no-unused-expressions */
+suite('<nuxeo-html-editor>', () => {
+  test('should display the placeholder when empty', async () => {
+    const editor = await fixture(
+      html`
+        <nuxeo-html-editor></nuxeo-html-editor>
+      `,
+    );
+    expect(editor._editor.root.dataset.placeholder).to.equal('Type here...');
+  });
+
+  test('should sync the html value', async () => {
+    const editor = await fixture(
+      html`
+        <nuxeo-html-editor value="Hello"></nuxeo-html-editor>
+      `,
+    );
+    await new Promise((resolve) => {
+      editor.addEventListener('value-changed', () => resolve());
+      editor._editor.insertText(editor._editor.getLength() - 1, ' world!', 'user');
+    });
+    expect(editor.value).to.equal(`<p>Hello world!</p>`);
+  });
+
+  test('should hide the toolbar when readonly', async () => {
+    const editor = await fixture(
+      html`
+        <nuxeo-html-editor read-only></nuxeo-html-editor>
+      `,
+    );
+    expect(isElementVisible(editor._editor.getModule('toolbar').container)).to.be.false;
+  });
+});
diff --git a/ui/widgets/alloy/LICENSE.md b/ui/widgets/alloy/LICENSE.md
diff --git a/ui/widgets/alloy/alloy-editor-all.js b/ui/widgets/alloy/alloy-editor-all.js