Skip to content

Commit

Permalink
Proper CSS and Image extraction
Browse files Browse the repository at this point in the history 
- Upgraded webpack components
- Added CSS extraction
- Added image extraction
- Added minification
- Removed old SCSS commands
  • Loading branch information
@klasjersevi
klasjersevi committed Sep 19, 2018
1 parent 2ee91b8 commit 41a5d55
Show file tree
Hide file tree
Showing 9 changed files with 1,938 additions and 2,180 deletions.
1 change: 0 additions & 1 deletion .babelrc
View file

This file was deleted.

263 changes: 134 additions & 129 deletions demo/angular.html
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,145 @@
<html>
<head>
<title>Quill Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">
<head>
<title>Quill Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta charset="utf-8">

<!-- Style -->
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.1/quill.snow.css">
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.1/quill.bubble.css">
<!-- Style -->
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.1/quill.snow.css">
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.1/quill.bubble.css">

<style>
ng-quill-editor.ng-invalid .ql-container {
border: 1px dashed red;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
content: '14';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
content: '16';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
content: '18';
}
</style>
<link rel="stylesheet" type="text/css" href="../dist/quill-emoji.css">

<!-- Scripts -->
<style>
ng-quill-editor .ql-container {
max-height: 300px;
}
ng-quill-editor.ng-invalid .ql-container {
border: 1px dashed red;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
content: '14';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
content: '16';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
content: '18';
}
</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.quilljs.com/1.3.1/quill.js"></script>
<script type="text/javascript" src="./ng-quill.js"></script>
<script src="../dist/quill-emoji.js"></script>
<script>
// declare a module and load quillModule
var myAppModule = angular.module('quillTest', ['ngQuill'])
myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set(null, null, 'custom placeholder')
}])
myAppModule.controller('AppCtrl', [
'$scope',
'$timeout',
function ($scope, $timeout) {
$scope.title = 'Quill works'
$scope.model = ''
$scope.modelJSON = [
{ insert: 'Hello ' },
{ insert: 'World!', attributes: { bold: true } },
{ insert: '\n' }
]
$scope.modelText = 'Hello World'
$scope.readOnly = false
$scope.test = ''
$scope.customOptions = [{
import: 'attributors/style/size',
whitelist: ['14', '16', '18', 'small', 'large', 'huge']
}]
$scope.customTag = [{
import: 'blots/block',
toRegister: {key: 'tagName', value: 'DIV'}
}]
$scope.customModules = {
toolbar: [
[
{'size': [false, '14', '16', '18']},
'emoji'
],
],
"emoji-toolbar": true,
"emoji-shortname": true,
"emoji-textarea": true
}
$timeout(function () {
$scope.title += ' awsome!!!'
}, 2000)
$scope.editorCreated = function (editor) {
console.log(editor)
}
$scope.contentChanged = function (editor, html, text, content, delta, oldDelta, source) {
console.log('editor: ', editor, 'html: ', html, 'text:', text, 'content:', content, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
}
$scope.selectionChanged = function (editor, range, oldRange, source) {
console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source)
}
}
])
</script>
</head>
<body ng-app="quillTest" ng-controller="AppCtrl">
<!-- <h3>Default editor + Callbacks/Outputs in JS console</h3>
<pre><code>{{title}}</code></pre>
<ng-quill-editor bounds="self" ng-model="title" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
<!-- Scripts -->

<h3>Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format</h3>
<pre><code>{{modelJSON}}</code></pre>
<ng-quill-editor format="object" custom-options="customTag" ng-model="modelJSON" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.quilljs.com/1.3.1/quill.js"></script>
<script type="text/javascript" src="./ng-quill.js"></script>
<script src="../dist/quill-emoji.js"></script>
<script>
// declare a module and load quillModule
var myAppModule = angular.module('quillTest', ['ngQuill'])
myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set(null, null, 'custom placeholder')
}])
myAppModule.controller('AppCtrl', [
'$scope',
'$timeout',
function ($scope, $timeout) {
$scope.title = 'Quill works'
$scope.model = ''
$scope.modelJSON = [
{ insert: 'Hello ' },
{ insert: 'World!', attributes: { bold: true } },
{ insert: '\n' }
]
$scope.modelText = 'Hello World'
$scope.readOnly = false
$scope.test = ''
$scope.customOptions = [{
import: 'attributors/style/size',
whitelist: ['14', '16', '18', 'small', 'large', 'huge']
}]
$scope.customTag = [{
import: 'blots/block',
toRegister: {key: 'tagName', value: 'DIV'}
}]
$scope.customModules = {
toolbar: [
[
{'size': [false, '14', '16', '18']},
'emoji'
],
],
"emoji-toolbar": true,
"emoji-shortname": true,
"emoji-textarea": true
}
$timeout(function () {
$scope.title += ' awsome!!!'
}, 2000)
$scope.editorCreated = function (editor) {
console.log(editor)
}
$scope.contentChanged = function (editor, html, text, content, delta, oldDelta, source) {
console.log('editor: ', editor, 'html: ', html, 'text:', text, 'content:', content, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
}
$scope.selectionChanged = function (editor, range, oldRange, source) {
console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source)
}
}
])
</script>
</head>
<body ng-app="quillTest" ng-controller="AppCtrl">
<!-- <h3>Default editor + Callbacks/Outputs in JS console</h3>
<pre><code>{{title}}</code></pre>
<ng-quill-editor bounds="self" ng-model="title" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
<h3>Bubble editor + Text-format</h3>
<pre><code>{{modelText}}</code></pre>
<ng-quill-editor format="text" theme="bubble" ng-model="modelText"></ng-quill-editor>
<h3>Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format</h3>
<pre><code>{{modelJSON}}</code></pre>
<ng-quill-editor format="object" custom-options="customTag" ng-model="modelJSON" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
<h3>Editor without toolbar + required and ngModule</h3>
<button ng-click="readOnly = !readOnly;">toggle readOnly</button>
readonly: {{readOnly}}
<form name="form">
<ng-quill-editor ng-model="title" read-only="readOnly" required="true" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
form invalid?: {{form.$invalid}}
</form>
-->
<!-- <h3>ng-quill - custom toolbar</h3>
<ng-quill-editor
ng-model="title"
placeholder=" "
>
<ng-quill-toolbar>
<div id="ng-quill-toolbar">
<span class="ql-formats">
<button class="ql-bold" ng-attr-title="{{'Bold'}}"></button>
</span>
<span class="ql-formats">
<select class="ql-align" ng-attr-title="{{'Aligment'}}">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<select class="ql-align">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
</div>
</ng-quill-toolbar>
</ng-quill-editor> -->
<h3>Bubble editor + Text-format</h3>
<pre><code>{{modelText}}</code></pre>
<ng-quill-editor format="text" theme="bubble" ng-model="modelText"></ng-quill-editor>
<h3>Custom font sizes</h3>
<ng-quill-editor ng-model="title" custom-options="customOptions" modules="customModules"></ng-quill-editor>
<h3>Editor without toolbar + required and ngModule</h3>
<button ng-click="readOnly = !readOnly;">toggle readOnly</button>
readonly: {{readOnly}}
<form name="form">
<ng-quill-editor ng-model="title" read-only="readOnly" required="true" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
form invalid?: {{form.$invalid}}
</form>
-->
<!-- <h3>ng-quill - custom toolbar</h3>
<ng-quill-editor
ng-model="title"
placeholder=" "
>
<ng-quill-toolbar>
<div id="ng-quill-toolbar">
<span class="ql-formats">
<button class="ql-bold" ng-attr-title="{{'Bold'}}"></button>
</span>
<span class="ql-formats">
<select class="ql-align" ng-attr-title="{{'Aligment'}}">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
<select class="ql-align">
<option selected></option>
<option value="center"></option>
<option value="right"></option>
<option value="justify"></option>
</select>
</span>
</div>
</ng-quill-toolbar>
</ng-quill-editor> -->

</body>
<h3>Custom font sizes</h3>
<ng-quill-editor ng-model="title" custom-options="customOptions" modules="customModules"></ng-quill-editor>

</body>
</html>
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link href="https://cdn.quilljs.com/1.3.5/quill.snow.css" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="../dist/quill-emoji.css"> -->
<link rel="stylesheet" type="text/css" href="../dist/quill-emoji.css">
</head>

<body>
Expand Down
1 change: 1 addition & 0 deletions dist/quill-emoji.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/quill-emoji.js
View file

Large diffs are not rendered by default.

21 changes: 11 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,24 @@
"description": "Quill Extension for Emoji Selection",
"main": "src/quill-emoji.js",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.3",
"babel-preset-env": "^1.7.0",
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"image-webpack-loader": "^4.3.1",
"node-sass": "^4.6.0",
"mini-css-extract-plugin": "^0.4.3",
"node-sass": "^4.9.3",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"uglifyjs-webpack-plugin": "^1.2.2",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.1",
"webpack": "^4.15.0",
"webpack-cli": "^2.0.9"
"webpack-cli": "^3.1.0"
},
"scripts": {
"build": "webpack",
"js-compile": "webpack",
"css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 --output dist/ src/scss/"
"build": "webpack"
},
"repository": {
"type": "git",
Expand Down
2 changes: 1 addition & 1 deletion src/scss/core/_emoji.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
display: inline-block;
height: 20px;
width: 20px;
background-image: url('../sheet_apple_64.png');
background-image: url('../../sheet_apple_64.png');
background-size: 820px;
background-repeat: no-repeat;
text-indent: -999px;
Expand Down
Loading

0 comments on commit 41a5d55

Please sign in to comment.