5htp-core 0.4.7-1 → 0.4.7-2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.7-1",
+	"version": "0.4.7-2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,9 @@
 		"framework"
 	],
 	"dependencies": {
+		"@lexical/headless": "^0.18.0",
+		"@lexical/html": "^0.18.0",
+		"@lexical/react": "^0.18.0",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -44,7 +47,9 @@
 		"intl": "^1.2.5",
 		"iso-639-1": "^2.1.9",
 		"js-cookie": "^3.0.1",
+		"jsdom": "^25.0.1",
 		"jsonwebtoken": "^8.5.1",
+		"lexical": "^0.18.0",
 		"load-script": "^2.0.0",
 		"locale": "^0.1.0",
 		"markdown-it": "^13.0.1",

package/src/client/components/Select/index.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 // Core
 import { Props as DropdownProps } from '@client/components/dropdown';
 import { Popover, Button, Input } from '@client/components';
+import { InputWrapper, InputBaseProps } from '@client/components/inputv3/base';
 
 // Specific
 import { 
@@ -21,10 +22,8 @@ import ChoiceElement from './ChoiceElement';
 - TYPES
 ----------------------------------*/
 
-export type Props = SelectorProps & {
+export type Props = SelectorProps & Omit<InputBaseProps<Choice>, 'value'> & {
     dropdown?: boolean | DropdownProps,
-    title: string,
-    errors?: string[],
 }
 
 export type { Choice } from './ChoiceSelector';
@@ -51,24 +50,27 @@ const ensureChoice = (choice: Choice | string, choices: Choice[]): Choice => {
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
-export default ({ 
-    // Input basics
-    title, 
-    errors,
-    icon,
-    required,
-    validator, 
-
-    // Choice selection
-    choices: initChoices, 
-    noneSelection, 
-    enableSearch, 
-    value: current, 
-    onChange: onChangeCallback, 
-    multiple, 
-    dropdown,
-    ...otherProps
-}: Props) => {
+export default (props: Props) => {
+
+    let {
+        // Input basics
+        title,
+        errors,
+        icon,
+        required,
+        validator,
+        wrapper = true,
+
+        // Choice selection
+        choices: initChoices,
+        noneSelection,
+        enableSearch,
+        value: current,
+        onChange: onChangeCallback,
+        multiple,
+        dropdown,
+        ...otherProps
+    } = props;
 
     /*----------------------------------
     - INIT
@@ -161,119 +163,122 @@ export default ({
         />
     )
 
-    return dropdown ? (
-        <Popover {...(dropdown === true ? {
-            width: '200px'
-        } : dropdown)} content={(
-            <div class="card bg white col al-top">
-
-                {Search} 
-
-                {selectedItems.length !== 0 && (
-                    <ul class="row al-left wrap sp-05">
-                        {selectedItems.map( choice => (
-                            <ChoiceElement format='badge' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent 
-                            />
-                        ))}
-                    </ul>
-                )}
-
-                {search.loading ? (
-                    <div class="row al-center h-2">
-                        <i src="spin" />
+    return (
+        <InputWrapper {...props}>
+            {dropdown ? (
+                <Popover {...(dropdown === true ? {
+                    width: '200px'
+                } : dropdown)} content={(
+                    <div class="card bg white col al-top">
+
+                        {Search} 
+
+                        {selectedItems.length !== 0 && (
+                            <ul class="row al-left wrap sp-05">
+                                {selectedItems.map( choice => (
+                                    <ChoiceElement format='badge' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent 
+                                    />
+                                ))}
+                            </ul>
+                        )}
+
+                        {search.loading ? (
+                            <div class="row al-center h-2">
+                                <i src="spin" />
+                            </div>
+                        ) : (
+                        <ul class="menu col">
+                                {choices.map( choice => (
+                                    <ChoiceElement format='list' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent
+                                    />
+                                ))} 
+                            </ul>
+                        )} 
                     </div>
-                ) : (
-                   <ul class="menu col">
-                        {choices.map( choice => (
-                            <ChoiceElement format='list' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent
-                            />
-                        ))} 
-                    </ul>
-                )} 
-            </div>
-        )} state={popoverState}>
-            <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
-
-                {currentList.length === 0 ? <>
-                    {title}
-                </> : multiple ? <>
-                    {title} <span class="badge s bg accent">{currentList.length}</span> 
-                </> : <>
-                    {currentList[0].label}
-                </>}
-
-                {errors?.length && (
-                    <div class="bubble bg error bottom">
-                        {errors.join('. ')}
-                    </div>
-                )}
-
-            </Button>
-        </Popover>
-    ) : (
-
-        <div class="col sp-05">
-            <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
-                    
-                <div class="row al-left wrap pd-1">
-                    
-                    {icon !== undefined && (
-                        <i src={icon} />
-                    )}
+                )} state={popoverState}>
+                    <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
+
+                        {currentList.length === 0 ? <>
+                            {title}
+                        </> : multiple ? <>
+                            {title} <span class="badge s bg accent">{currentList.length}</span> 
+                        </> : <>
+                            {currentList[0].label}
+                        </>}
+
+                        {errors?.length && (
+                            <div class="bubble bg error bottom">
+                                {errors.join('. ')}
+                            </div>
+                        )}
+
+                    </Button>
+                </Popover>
+            ) : (
+                <div class="col sp-05">
+                    <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
+                            
+                        <div class="row al-left wrap pd-1">
+                            
+                            {icon !== undefined && (
+                                <i src={icon} />
+                            )}
+
+                            <div class="col al-left sp-05">
+                                
+                                <label>{title}{isRequired && (
+                                    <span class="fg error">&nbsp;*</span>
+                                )}</label>
+
+                                <div class="row al-left wrap sp-05">
+
+                                    {selectedItems.map( choice => (
+                                        <ChoiceElement format='badge' choice={choice} 
+                                            currentList={currentList}
+                                            onChange={onChange}
+                                            multiple={multiple}
+                                            includeCurrent 
+                                        />
+                                    ))} 
+
+                                    {Search}  
+                                </div>
+                            </div>
 
-                    <div class="col al-left sp-05">
-                        
-                        <label>{title}{isRequired && (
-                            <span class="fg error">&nbsp;*</span>
-                        )}</label>
-
-                        <div class="row al-left wrap sp-05">
-
-                            {selectedItems.map( choice => (
-                                <ChoiceElement format='badge' choice={choice} 
-                                    currentList={currentList}
-                                    onChange={onChange}
-                                    multiple={multiple}
-                                    includeCurrent 
-                                />
-                            ))} 
-
-                            {Search}  
                         </div>
-                    </div>
-
-                </div>
 
-                <div class="pd-1">
-                    <ul class="row al-left wrap sp-05" style={{
-                        maxHeight: '30vh',
-                        overflowY: 'auto'
-                    }}>
-                        {choices.map( choice => (
-                            <ChoiceElement format='badge' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent
-                            />
-                        ))}
-                    </ul>
-                </div>
-                
-            </div>
-            {errors?.length && (
-                <div class="bubble bg error bottom">
-                    {errors.join('. ')}
+                        <div class="pd-1">
+                            <ul class="row al-left wrap sp-05" style={{
+                                maxHeight: '30vh',
+                                overflowY: 'auto'
+                            }}>
+                                {choices.map( choice => (
+                                    <ChoiceElement format='badge' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent
+                                    />
+                                ))}
+                            </ul>
+                        </div>
+                        
+                    </div>
+                    {errors?.length && (
+                        <div class="bubble bg error bottom">
+                            {errors.join('. ')}
+                        </div>
+                    )}
                 </div>
             )}
-        </div>
+        </InputWrapper>
     )
 }

package/src/client/components/index.ts

@@ -27,4 +27,5 @@ export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as Checkbox } from './inputv3/Checkbox';
 export { default as File } from './inputv3/file';
-export { default as DateRangeInput } from './inputv3/Date';
+export { default as DateRangeInput } from './inputv3/Date';
+export { default as Rte } from './inputv3/Rte';

package/src/client/components/inputv3/Rte/ExampleTheme.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export default {
+    code: 'editor-code',
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+        h4: 'editor-heading-h4',
+        h5: 'editor-heading-h5',
+    },
+    image: 'editor-image',
+    link: 'editor-link',
+    list: {
+        listitem: 'editor-listitem',
+        nested: {
+            listitem: 'editor-nested-listitem',
+        },
+        ol: 'editor-list-ol',
+        ul: 'editor-list-ul',
+    },
+    ltr: 'ltr',
+    paragraph: 'editor-paragraph',
+    placeholder: 'editor-placeholder',
+    quote: 'editor-quote',
+    rtl: 'rtl',
+    text: {
+        bold: 'editor-text-bold',
+        code: 'editor-text-code',
+        hashtag: 'editor-text-hashtag',
+        italic: 'editor-text-italic',
+        overflowed: 'editor-text-overflowed',
+        strikethrough: 'editor-text-strikethrough',
+        underline: 'editor-text-underline',
+        underlineStrikethrough: 'editor-text-underlineStrikethrough',
+    },
+};

package/src/client/components/inputv3/Rte/ToolbarPlugin.tsx

@@ -0,0 +1,167 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import {
+    $getSelection,
+    $isRangeSelection,
+    CAN_REDO_COMMAND,
+    CAN_UNDO_COMMAND,
+    FORMAT_ELEMENT_COMMAND,
+    FORMAT_TEXT_COMMAND,
+    REDO_COMMAND,
+    SELECTION_CHANGE_COMMAND,
+    UNDO_COMMAND,
+} from 'lexical';
+
+import React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const LowPriority = 1;
+
+function Divider() {
+    return <div className="divider" />;
+}
+
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+
+    const $updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+        }
+    }, []);
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerUpdateListener(({ editorState }) => {
+                editorState.read(() => {
+                    $updateToolbar();
+                });
+            }),
+            editor.registerCommand(
+                SELECTION_CHANGE_COMMAND,
+                (_payload, _newEditor) => {
+                    $updateToolbar();
+                    return false;
+                },
+                LowPriority,
+            ),
+            editor.registerCommand(
+                CAN_UNDO_COMMAND,
+                (payload) => {
+                    setCanUndo(payload);
+                    return false;
+                },
+                LowPriority,
+            ),
+            editor.registerCommand(
+                CAN_REDO_COMMAND,
+                (payload) => {
+                    setCanRedo(payload);
+                    return false;
+                },
+                LowPriority,
+            ),
+        );
+    }, [editor, $updateToolbar]);
+
+    return (
+        <div className="toolbar" ref={toolbarRef}>
+            <button
+                disabled={!canUndo}
+                onClick={() => {
+                    editor.dispatchCommand(UNDO_COMMAND, undefined);
+                }}
+                className="toolbar-item spaced"
+                aria-label="Undo">
+                <i className="format undo" />
+            </button>
+            <button
+                disabled={!canRedo}
+                onClick={() => {
+                    editor.dispatchCommand(REDO_COMMAND, undefined);
+                }}
+                className="toolbar-item"
+                aria-label="Redo">
+                <i className="format redo" />
+            </button>
+            <Divider />
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+                }}
+                className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
+                aria-label="Format Bold">
+                <i className="format bold" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+                }}
+                className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
+                aria-label="Format Italics">
+                <i className="format italic" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+                }}
+                className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
+                aria-label="Format Underline">
+                <i className="format underline" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+                }}
+                className={'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')}
+                aria-label="Format Strikethrough">
+                <i className="format strikethrough" />
+            </button>
+            <Divider />
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+                }}
+                className="toolbar-item spaced"
+                aria-label="Left Align">
+                <i className="format left-align" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+                }}
+                className="toolbar-item spaced"
+                aria-label="Center Align">
+                <i className="format center-align" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+                }}
+                className="toolbar-item spaced"
+                aria-label="Right Align">
+                <i className="format right-align" />
+            </button>
+            <button
+                onClick={() => {
+                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+                }}
+                className="toolbar-item"
+                aria-label="Justify Align">
+                <i className="format justify-align" />
+            </button>{' '}
+        </div>
+    );
+}

package/src/client/components/inputv3/Rte/icons/LICENSE.md

@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md

package/src/client/components/inputv3/Rte/icons/arrow-clockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/arrow-counterclockwise.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/journal-text.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
+  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/justify.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-paragraph.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/text-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-bold.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-italic.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-strikethrough.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
+  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/>
+</svg>

package/src/client/components/inputv3/Rte/icons/type-underline.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
+  <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
+</svg>