Switch to CKEditor

.eslintrc.yml

@@ -12,6 +12,8 @@ globals:
   Jose: false
   JoseJWE: false
   TestPilotGA: false
+  ClassicEditor: false
+  migrationCheck: false
 
 root: true
 

.gitignore

@@ -4,3 +4,4 @@ src/vendor/*
 src/sidebar/vendor/*
 src/_locales
 web-ext-artifacts/
+ckeditor-build/build/*

.travis.yml

@@ -3,6 +3,11 @@ language: node_js
 node_js:
   - "6"
 
-script:
-  - npm run build
-  - npm run lint
+matrix:
+  include:
+    - script: npm run build-ck
+      env: BUILD_CK
+    - script: npm run build
+      env: BUILD_NOTES
+    - script: npm run lint
+      env: LINT

README.md

@@ -36,6 +36,7 @@ Firefox Notes localization is managed via [Pontoon](https://pontoon.mozilla.org/
 [Mozilla Public License Version 2.0](LICENSE)
 
 [Quill Rich Text Editor License](https://github.com/quilljs/quill/blob/develop/LICENSE)
+[CKEditor Text Editor License](https://github.com/ckeditor/ckeditor5/blob/master/LICENSE.md) used under MPL licence
 
 ## Other
 

ckeditor-build/src/ckeditor.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
+import MarkdownPlugin from './markdown';
+import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
+import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import StrikePlugin from './strike';
+import CodePlugin from '@ckeditor/ckeditor5-basic-styles/src/code';
+import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
+import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
+import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+
+export default class ClassicEditor extends ClassicEditorBase {}
+
+ClassicEditor.build = {
+  plugins: [
+    EssentialsPlugin,
+    MarkdownPlugin,
+    AutoformatPlugin,
+    BoldPlugin,
+    ItalicPlugin,
+    StrikePlugin,
+    CodePlugin,
+    HeadingPlugin,
+    ListPlugin,
+    ParagraphPlugin
+  ],
+  config: {
+    toolbar: {
+      items: [
+        'headings',
+        'bulletedList',
+        'numberedList',
+        'bold',
+        'italic',
+        'strike',
+        'code'
+      ]
+    }
+  }
+};
+
+ClassicEditor.imports = { range: Range };

ckeditor-build/src/markdown.js

@@ -0,0 +1,6 @@
+import GFMDataProcessor from '@ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
+
+// Simple plugin which loads the data processor.
+export default function Markdown(editor) {
+  editor.data.processor = new GFMDataProcessor();
+}

ckeditor-build/src/strike.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module notes/ckeditor-build/strike
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import StrikeEngine from './strikeengine';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import strikeIcon from './icons/strike.svg';
+
+/**
+ * The strike feature. It introduces the Strike button and the <kbd>Ctrl+Alt+S</kbd> keystroke.
+ *
+ * It uses the {@link module:basic-styles/strikeengine~StrikeEngine strike engine feature}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Strike extends Plugin {
+  /**
+   * @inheritDoc
+   */
+  static get requires() {
+    return [ StrikeEngine ];
+  }
+
+  /**
+   * @inheritDoc
+   */
+  static get pluginName() {
+    return 'Strike';
+  }
+
+  /**
+   * @inheritDoc
+   */
+  init() {
+    const editor = this.editor;
+    const t = editor.t;
+    const command = editor.commands.get( 'strike' );
+
+    // Add strike button to feature components.
+    editor.ui.componentFactory.add( 'strike', locale => {
+      const view = new ButtonView( locale );
+
+      view.set( {
+        label: t( 'Strike' ),
+        icon: strikeIcon,
+        tooltip: true
+      } );
+
+      view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+      // Execute command.
+      this.listenTo( view, 'execute', () => editor.execute( 'strike' ) );
+
+      return view;
+    } );
+
+  }
+}

ckeditor-build/src/strikeengine.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2017, CKSource - Rémy Hubscher. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module notes/ckeditor-build/strikeengine
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
+import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
+import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
+
+const STRIKE = 'strike';
+
+/**
+ * The strike engine feature.
+ *
+ * It registers the `strike` command and introduces the
+ * `strikesthrough` attribute in the model which renders to the view
+ * as a `<s>` element.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class StrikeEngine extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const data = editor.data;
+		const editing = editor.editing;
+
+		// Allow strike attribute on all inline nodes.
+		editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$block' } );
+		// Temporary workaround. See https://github.com/ckeditor/ckeditor5/issues/477.
+		editor.document.schema.allow( { name: '$inline', attributes: STRIKE, inside: '$clipboardHolder' } );
+
+		// Build converter from model to view for data and editing pipelines.
+		buildModelConverter().for( data.modelToView, editing.modelToView )
+			.fromAttribute( STRIKE )
+			.toElement( 's' );
+
+		// Build converter from view to model for data pipeline.
+		buildViewConverter().for( data.viewToModel )
+			.fromElement( 's' )
+			.fromElement( 'del' )
+			.fromElement( 'strike' )
+			.fromAttribute( 'style', { 'text-decoration': 'line-through' } )
+			.toAttribute( STRIKE, true );
+
+		// Create strike command.
+		editor.commands.add( STRIKE, new AttributeCommand( editor, STRIKE ) );
+	}
+}

ckeditor-build/webpack.config.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+/* eslint-env node */
+
+const path = require('path');
+const webpack = require('webpack');
+const {bundler} = require('@ckeditor/ckeditor5-dev-utils');
+const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
+const BabiliPlugin = require('babel-minify-webpack-plugin');
+
+module.exports = {
+  devtool: 'source-map',
+
+  entry: path.resolve(__dirname, 'src', 'ckeditor.js'),
+
+  output: {
+    // build to the extension src vendor directory
+    path: path.resolve(__dirname, '..', 'src', 'sidebar', 'vendor'),
+    filename: 'ckeditor.js',
+    libraryTarget: 'umd',
+    libraryExport: 'default',
+    library: 'ClassicEditor'
+  },
+
+  plugins: [
+    new CKEditorWebpackPlugin({
+      languages: ['en']
+    }),
+    new BabiliPlugin(null, {
+      comments: false
+    }),
+    new webpack.BannerPlugin({
+      banner: bundler.getLicenseBanner(),
+      raw: true
+    })
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: ['raw-loader']
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              minimize: true
+            }
+          },
+          'sass-loader'
+        ]
+      }
+    ]
+  }
+};

package.json

@@ -8,8 +8,27 @@
     "url": "https://github.com/mozilla/notes/issues"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-autoformat": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-basic-styles": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-build-classic": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-dev-utils": "^5.0.0",
+    "@ckeditor/ckeditor5-dev-webpack-plugin": "^2.0.22",
+    "@ckeditor/ckeditor5-editor-classic": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-essentials": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-heading": "vladikoff/ckeditor5-heading#short-heading",
+    "@ckeditor/ckeditor5-list": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-markdown-gfm": "^1.0.0-alpha.2",
+    "@ckeditor/ckeditor5-paragraph": "^1.0.0-alpha.2",
+    "babel-minify-webpack-plugin": "^0.2.0",
+    "css-loader": "^0.28.7",
+    "node-sass": "^4.6.1",
     "quill": "1.2.6",
-    "testpilot-ga": "^0.2.1"
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.0",
+    "testpilot-ga": "^0.2.1",
+    "webpack": "^3.8.1",
+    "webpack-sources": "1.0.1"
   },
   "devDependencies": {
     "cross-spawn": "^5.1.0",
@@ -26,16 +45,17 @@
   "repository": "mozilla/notes",
   "scripts": {
     "build": "node scripts/build-locales && web-ext build -s src",
+    "build-ck": "cd ckeditor-build && webpack && cd ..",
     "clean": "rimraf web-ext-artifacts 'src/sidebar/vendor/!(.gitkeep)' && npm run postinstall",
     "format": "prettier 'src/**/!(vendor)/*.{css,js}' --single-quote --write",
     "lint": "npm-run-all lint:*",
     "lint:js": "eslint src",
     "lint:webext": "web-ext lint -s src --ignore-files='sidebar/vendor/*.js' --self-hosted",
     "package": "npm run build && mv web-ext-artifacts/*.zip addon.xpi",
     "postformat": "npm run lint:js -- --fix",
-    "postinstall": "node scripts/postinstall.js && node scripts/build-locales.js",
+    "postinstall": "npm run build-ck && node scripts/postinstall.js && node scripts/build-locales.js",
     "prebuild": "npm run clean",
-    "start": "web-ext run -s src",
+    "start": "web-ext run -s src & npm run build-ck --watch",
     "start-rtl": "WEB_EXT_PREF=general.useragent.locale=ar npm start",
     "start-nightly": "npm start -- --firefox=nightly"
   }

scripts/postinstall.js

@@ -4,9 +4,10 @@ const { copySync } = require('fs-extra');
 
 const files = [
   copySync('node_modules/testpilot-ga/dist/index.js', 'src/vendor/testpilot-ga.js'),
-  copySync('node_modules/quill/dist/quill.min.js', 'src/sidebar/vendor/quill.js'),
-  copySync('node_modules/quill/dist/quill.snow.css', 'src/sidebar/vendor/quill.snow.css'),
-  copySync('node_modules/quill/LICENSE', 'src/sidebar/vendor/quill.LICENSE')
+  copySync('node_modules/@ckeditor/ckeditor5-build-classic/LICENSE.md', 'src/sidebar/vendor/ckeditor.LICENSE'),
+  // Remove quill after migration
+  copySync('node_modules/quill/LICENSE', 'src/sidebar/vendor/quill.LICENSE'),
+  copySync('node_modules/quill/dist/quill.min.js', 'src/sidebar/vendor/quill.js')
 ];
 
 Promise.all(files).catch(err => {

src/background.js

@@ -10,7 +10,7 @@ const analytics = new TestPilotGA({
   ds: 'addon',
   an: 'Notes Experiment',
   aid: 'notes@mozilla.com',
-  av: '1.9.0dev'  // XXX: Change version on release
+  av: browser.runtime.getManifest().version
 });
 
 function sendMetrics(event, context = {}) {
@@ -50,6 +50,12 @@ browser.runtime.onMessage.addListener(function(eventData) {
     case 'metrics-drag-n-drop':
       sendMetrics('drag-n-drop', eventData.context);
       break;
+    case 'metrics-migrated':
+      sendMetrics('metrics-migrated', eventData.context);
+      break;
+    case 'metrics-migrated-before':
+      sendMetrics('metrics-migrated-before', eventData.context);
+      break;
     case 'theme-changed':
       sendMetrics('theme-changed', eventData.content);
       browser.runtime.sendMessage({