feat: setFontSize and setFontName

wxik · Feb 4, 2021 · 42ec663 · 42ec663
1 parent a776e60
commit 42ec663
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 #1.7.0
 ### Added
 - Add h1,h2,h3,h4,h5,h6 State mapping
+- `setFontSize` Changes the font size for the selection or at the insertion point. This requires an integer from 1-7 as a value argument.
+- `setFontName` Changes the font name for the selection or at the insertion point. This requires a font name string (like "Arial") as a value argument.
 
 ### Fix
 - [Toolbar active/inactive](https://github.com/wxik/react-native-rich-editor/issues/141)

diff --git a/examples/package.json b/examples/package.json
@@ -14,7 +14,8 @@
     "react-native": "0.63.4",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-modal": "^11.6.1",
-    "react-native-webview": "^11.2.1"
+    "react-native-webview": "^11.2.1",
+    "@wxik/core": "^0.4.11"
   },
   "devDependencies": {
     "@babel/core": "^7.12.13",

diff --git a/examples/src/example.js b/examples/src/example.js
@@ -19,6 +19,7 @@ import {
     View,
 } from 'react-native';
 import {actions, getContentCSS, RichEditor, RichToolbar} from 'react-native-pell-rich-editor';
+import {XMath} from '@wxik/core';
 import {InsertLinkModal} from './insertLink';
 import {EmojiView} from './emoji';
 import {defaultActions} from '../../src';
@@ -37,9 +38,6 @@ const initHTML = `<br/>
 <a href="https://github.com/wxik/flutter-rich-editor">Flutter</a>
 </center>
 <br/>
-<div style="padding:10px 0;" contentEditable="false">
-<iframe  width="100%" height="220"  src="https://www.youtube.com/embed/6FrNXgXlCGA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
 <div><center><img src="${imageList[0]}" onclick="_.sendEvent('ImgClick')" contenteditable="false" height="170px"/></center></div>
 <div>
 <br/>Click the picture to switch<br/><br/>
@@ -155,9 +153,20 @@ class Example extends React.Component {
         );
     }
 
+    fontSize = () => {
+        // 1=  10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px, 7 = 48px;
+        const size = [1, 2, 3, 4, 5, 6, 7];
+        this.richText.current?.setFontSize(size[XMath.random(size.length - 1)]);
+    };
+
     insertHTML() {
+        // this.richText.current?.insertHTML(
+        //     `<span onclick="alert(2)" style="color: blue; padding:0 10px;" contenteditable="false">HTML</span>`,
+        // );
         this.richText.current?.insertHTML(
-            `<span onclick="alert(2)" style="color: blue; padding:0 10px;" contenteditable="false">HTML</span>`,
+            `<div style="padding:10px 0;" contentEditable="false">
+                <iframe  width="100%" height="220"  src="https://www.youtube.com/embed/6FrNXgXlCGA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            </div>`,
         );
     }
 
@@ -228,17 +237,13 @@ class Example extends React.Component {
         let index = 0;
         switch (type) {
             case 'ImgClick':
-                index = this.i_tempIndex || 1;
-                this.i_tempIndex = index + 1 >= imageList.length ? 0 : index + 1;
-                this.richText.current?.commandDOM(`$('#${id}').src="${imageList[index]}"`);
+                this.richText.current?.commandDOM(`$('#${id}').src="${imageList[XMath.random(imageList.length - 1)]}"`);
                 break;
             case 'TitleClick':
-                index = this._tempIndex || 0;
-                const color = ['red', 'blue', 'gray', 'yellow', 'coral'][index];
-                this._tempIndex = index + 1 >= color.length ? 0 : index + 1;
+                const color = ['red', 'blue', 'gray', 'yellow', 'coral'];
 
                 // command: $ = document.querySelector
-                this.richText.current?.commandDOM(`$('#${id}').style.color='${color}'`);
+                this.richText.current?.commandDOM(`$('#${id}').style.color='${color[XMath.random(color.length - 1)]}'`);
                 break;
             case 'SwitchImage':
                 break;
@@ -361,6 +366,7 @@ class Example extends React.Component {
                             actions.heading4,
                             'insertEmoji',
                             'insertHTML',
+                            'fontSize',
                         ]} // default defaultActions
                         iconMap={{
                             insertEmoji: phizIcon,
@@ -375,6 +381,7 @@ class Example extends React.Component {
                         insertEmoji={that.handleEmoji}
                         insertHTML={that.insertHTML}
                         insertVideo={that.insertVideo}
+                        fontSize={that.fontSize}
                     />
                     {emojiVisible && <EmojiView onSelect={that.insertEmoji} />}
                 </KeyboardAvoidingView>

diff --git a/examples/yarn.lock b/examples/yarn.lock
@@ -1121,6 +1121,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@wxik/core@^0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@wxik/core/-/core-0.4.11.tgz#c241db13f03f1ada35489e0c2bf019399b6200da"
+  integrity sha512-sJIFLzxw8TPG+nZrskBnAszc0goGRxUu5vNzy304RPTTcAwbIzg6pRbC/q8JmAKNzQmSSdOEtAfbSxilikc7+Q==
+
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"

diff --git a/img/[email protected] b/img/[email protected]
diff --git a/img/[email protected] b/img/[email protected]
diff --git a/index.d.ts b/index.d.ts
@@ -172,6 +172,11 @@ export class RichEditor extends React.Component<RichEditorProps> {
 
     insertHTML: (html: string) => void;
 
+    /**
+     * 1 = 10px, 2 = 13px, 3 = 16px, 4 = 18px, 5 = 24px, 6 = 32px, 7 = 48px;
+     */
+    setFontSize: (size: 1 | 2 | 3 | 4 | 5 | 6 | 7) => void;
+
     /**
      * $ = document.querySelector
      * this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
@@ -259,7 +264,7 @@ export interface RichToolbarProps {
      * Custom actions you want the toolbar to permit.
      * By default the toolbar permits an Action set of type DefaultActions
      */
-    actions?: Partial<DefaultActions> | string[];
+    actions?: Partial<defaultActions> | string[];
 }
 
 export class RichToolbar extends React.Component<RichToolbarProps> {}
diff --git a/src/RichEditor.js b/src/RichEditor.js
@@ -361,6 +361,14 @@ export default class RichTextEditor extends Component {
         }
     }
 
+    setFontSize(size) {
+        this.sendAction(actions.fontSize, 'result', size);
+    }
+
+    setFontName(name) {
+        this.sendAction(actions.fontName, 'result', name);
+    }
+
     commandDOM(command) {
         if (command) {
             this.sendAction(actions.content, 'commandDOM', command);

diff --git a/src/RichToolbar.js b/src/RichToolbar.js
@@ -41,6 +41,7 @@ function getDefaultIcon() {
     texts[actions.alignFull] = require('../img/justify_full.png');
     texts[actions.blockquote] = require('../img/blockquote.png');
     texts[actions.line] = require('../img/line.png');
+    texts[actions.fontSize] = require('../img/fontSize.png');
     return texts;
 }
 

diff --git a/src/const.js b/src/const.js
@@ -27,6 +27,8 @@ export const actions = {
     insertHTML: 'html',
     insertImage: 'image',
     insertVideo: 'video',
+    fontSize: 'fontSize',
+    fontName: 'fontName',
     setSubscript: 'subscript',
     setSuperscript: 'superscript',
     setStrikethrough: 'strikeThrough',

diff --git a/src/editor.js b/src/editor.js
@@ -242,13 +242,13 @@ function createHTML(options = {}) {
             italic: { state: function() { return queryCommandState('italic'); }, result: function() { return exec('italic'); }},
             underline: { state: function() { return queryCommandState('underline'); }, result: function() { return exec('underline'); }},
             strikeThrough: { state: function() { return queryCommandState('strikeThrough'); }, result: function() { return exec('strikeThrough'); }},
-            heading1: { state: function() { return queryCommandState(formatBlock) === 'h1'; }, result: function() { return exec(formatBlock, '<h1>'); }},
-            heading2: { state: function() { return queryCommandState(formatBlock) === 'h2'; }, result: function() { return exec(formatBlock, '<h2>'); }},
-            heading3: { state: function() { return queryCommandState(formatBlock) === 'h3'; }, result: function() { return exec(formatBlock, '<h3>'); }},
-            heading4: { state: function() { return queryCommandState(formatBlock) === 'h4'; }, result: function() { return exec(formatBlock, '<h4>'); }},
-            heading5: { state: function() { return queryCommandState(formatBlock) === 'h5'; }, result: function() { return exec(formatBlock, '<h5>'); }},
-            heading6: { state: function() { return queryCommandState(formatBlock) === 'h6'; }, result: function() { return exec(formatBlock, '<h6>'); }},
-            paragraph: { state: function() { return queryCommandState(formatBlock) === 'p'; }, result: function() { return exec(formatBlock, '<p>'); }},
+            heading1: { state: function() { return queryCommandValue(formatBlock) === 'h1'; }, result: function() { return exec(formatBlock, '<h1>'); }},
+            heading2: { state: function() { return queryCommandValue(formatBlock) === 'h2'; }, result: function() { return exec(formatBlock, '<h2>'); }},
+            heading3: { state: function() { return queryCommandValue(formatBlock) === 'h3'; }, result: function() { return exec(formatBlock, '<h3>'); }},
+            heading4: { state: function() { return queryCommandValue(formatBlock) === 'h4'; }, result: function() { return exec(formatBlock, '<h4>'); }},
+            heading5: { state: function() { return queryCommandValue(formatBlock) === 'h5'; }, result: function() { return exec(formatBlock, '<h5>'); }},
+            heading6: { state: function() { return queryCommandValue(formatBlock) === 'h6'; }, result: function() { return exec(formatBlock, '<h6>'); }},
+            paragraph: { state: function() { return queryCommandValue(formatBlock) === 'p'; }, result: function() { return exec(formatBlock, '<p>'); }},
             quote: { result: function() { return exec(formatBlock, '<blockquote>'); }},
             removeFormat: { result: function() { return exec('removeFormat'); }},
             orderedList: {
@@ -272,6 +272,8 @@ function createHTML(options = {}) {
             justifyFull: { state: function() { return queryCommandState('justifyFull'); }, result: function() { return exec('justifyFull'); }},
             hiliteColor: {  state: function() { return queryCommandState('hiliteColor'); }, result: function(color) { return exec('hiliteColor', color); }},
             foreColor: { state: function() { return queryCommandState('foreColor'); }, result: function(color) { return exec('foreColor', color); }},
+            fontSize: { result: function(size) { return exec('fontSize', size); }},
+            fontName: { result: function(name) { return exec('fontName', name); }},
             link: {
                 result: function(data) {
                     data = data || {};