A

Nuvotion-Visuals · Dec 18, 2023 · 2ebb560 · 2ebb560
1 parent 4008186
commit 2ebb560
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ You can then overwrite these variables in your global style sheet to change the
 
 Formation uses [FontAwesome v6](https://fontawesome.com/v6/search?m=free), allowing for both pro and free icons to be used in components. 
 
-The following icons should be included in your project to ensure all components display correctly.
+The following icons should be included in your project to ensure all components display correctly. You can also use other style variants, just be sure to include your chosen style in component props, like `iconPrefix='fal'`.
 
 ```jsx
 // in your app's entrypoint (_app.tsx, App.js, etc)
@@ -120,7 +120,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import * as far from '@fortawesome/free-regular-svg-icons'
 import * as fas from '@fortawesome/free-solid-svg-icons'
 library.add(
-   // regular
+  // regular
   far.faHeart, far.faPaperPlane, far.faCheckSquare, far.faSquare,
   fas.faEnvelope, far.faTrashAlt, far.faBookmark, far.faCircle, far.faCircleDot,
 
@@ -151,7 +151,11 @@ library.add(
   fas.faMagnifyingGlassMinus, fas.faMagnifyingGlassPlus, fas.faCog,
   fas.faScissors, fas.faEyedropper, fas.faGrip, fas.faList, fas.faAddressCard,
   fas.faCaretRight, fas.faCaretLeft, fas.faAngleLeft, fas.faAngleRight, 
-  fas.faAnglesLeft, fas.faAnglesRight, fas.faCamera
+  fas.faAnglesLeft, fas.faAnglesRight, fas.faCamera, fas.faSquareCheck,
+  fas.faRepeat, fas.faCopy, fas.faSync,
+  fas.faBold, fas.faItalic, fas.faUnderline, fas.faListOl, fas.faListUl, fas.faLink,
+  fas.faImage, fas.faVideo, fas.faCode, fas.faEraser, fas.faFileVideo, fas.faFileCode,
+  fas.faTerminal, fas.faQuoteRight
 )
 
 ```
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
   "resolutions": {
     "string-width": "^4",

diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -7,18 +7,21 @@ import {
   insertCSS,
 } from '../../internal'
 import { quillStyles } from './quillStyles'
+import { IconPrefix } from '@fortawesome/fontawesome-common-types'
 
 interface RichTextEditorProps {
   value: string
   onChange: (value: string) => void
   px?: number,
-  outline?: boolean
+  outline?: boolean,
+  iconPrefix?: IconPrefix
 }
 export const RichTextEditor: FC<RichTextEditorProps> = ({
   value,
   onChange,
   px,
-  outline
+  outline,
+  iconPrefix
 }) => {
   const [loaded, setLoaded] = useState(false)
   const quillRef = useRef(null)
@@ -48,18 +51,18 @@ export const RichTextEditor: FC<RichTextEditorProps> = ({
         <option value='4'>H4</option>
         <option value='normal'>Normal</option>
       </S.Select>
-      <Button icon={'bold'} iconPrefix='fas' onClick={handlers.handleBold} compact minimal square title='Bold' />
-      <Button icon={'italic'} iconPrefix='fas' onClick={handlers.handleItalic} compact minimal square title='Italic' />
-      <Button icon={'underline'} iconPrefix='fas' onClick={handlers.handleUnderline} compact minimal square title='Underline' />
-      <Button icon={'list-ol'} iconPrefix='fas' onClick={handlers.handleListOrdered} compact minimal square title='Ordered List' />
-      <Button icon={'list-ul'} iconPrefix='fas' onClick={handlers.handleListBullet} compact minimal square title='Unordered List' />
-      <Button icon={'link'} iconPrefix='fas' onClick={handlers.handleLink} compact minimal square title='Insert Link' />
-      <Button icon={'image'} iconPrefix='fas' onClick={handlers.handleImage} compact minimal square title='Insert Image' />
-      <Button icon={'clapperboard'} iconPrefix='fas' onClick={handlers.handleVideo} compact minimal square title='Insert Video' />
-      <Button icon={'code'} iconPrefix='fas' onClick={handlers.handleIframe} compact minimal square title='Insert Iframe' />
-      <Button icon={'terminal'} iconPrefix='fas' onClick={handlers.handleCode} compact minimal square title='Code Block' />
-      <Button icon={'quote-right'} iconPrefix='fas' onClick={handlers.handleBlockquote} compact minimal square title='Blockquote' />
-      <Button icon={'eraser'} iconPrefix='fas' onClick={handlers.handleClean} compact minimal square title='Clear Formatting' />
+      <Button icon={'bold'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleBold} compact minimal square title='Bold' />
+      <Button icon={'italic'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleItalic} compact minimal square title='Italic' />
+      <Button icon={'underline'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleUnderline} compact minimal square title='Underline' />
+      <Button icon={'list-ol'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleListOrdered} compact minimal square title='Ordered List' />
+      <Button icon={'list-ul'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleListBullet} compact minimal square title='Unordered List' />
+      <Button icon={'link'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleLink} compact minimal square title='Insert Link' />
+      <Button icon={'image'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleImage} compact minimal square title='Insert Image' />
+      <Button icon={'clapperboard'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleVideo} compact minimal square title='Insert Video' />
+      <Button icon={'code'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleIframe} compact minimal square title='Insert Iframe' />
+      <Button icon={'terminal'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleCode} compact minimal square title='Code Block' />
+      <Button icon={'quote-right'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleBlockquote} compact minimal square title='Blockquote' />
+      <Button icon={'eraser'} iconPrefix={iconPrefix ? iconPrefix : 'fas'} onClick={handlers.handleClean} compact minimal square title='Clear Formatting' />
       </Gap>
     </S.Toolbar>
   )