Skip to content
This repository has been archived by the owner on Jan 6, 2023. It is now read-only.

Commit

Permalink
Merge pull request #394 from mozilla/ckeditor-concept
Browse files Browse the repository at this point in the history
Switch to CKEditor
  • Loading branch information
Natim authored Nov 21, 2017
2 parents aab3f9d + 911fb87 commit d3a0b7e
Show file tree
Hide file tree
Showing 19 changed files with 711 additions and 534 deletions.
2 changes: 2 additions & 0 deletions .eslintrc.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ globals:
Jose: false
JoseJWE: false
TestPilotGA: false
ClassicEditor: false
migrationCheck: false

root: true

Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ src/vendor/*
src/sidebar/vendor/*
src/_locales
web-ext-artifacts/
ckeditor-build/build/*
11 changes: 8 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
49 changes: 49 additions & 0 deletions ckeditor-build/src/ckeditor.js
Original file line number Diff line number Diff line change
@@ -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 };
1 change: 1 addition & 0 deletions ckeditor-build/src/icons/strike.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions ckeditor-build/src/markdown.js
Original file line number Diff line number Diff line change
@@ -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();
}
64 changes: 64 additions & 0 deletions ckeditor-build/src/strike.js
Original file line number Diff line number Diff line change
@@ -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;
} );

}
}
56 changes: 56 additions & 0 deletions ckeditor-build/src/strikeengine.js
Original file line number Diff line number Diff line change
@@ -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 ) );
}
}
64 changes: 64 additions & 0 deletions ckeditor-build/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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'
]
}
]
}
};
26 changes: 23 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
Expand Down
7 changes: 4 additions & 3 deletions scripts/postinstall.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
8 changes: 7 additions & 1 deletion src/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {}) {
Expand Down Expand Up @@ -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({
Expand Down
Loading

0 comments on commit d3a0b7e

Please sign in to comment.