Merge pull request #25 from 10play/fix-font-example

Fix Font Example

example/src/Examples/Basic.tsx

@@ -13,6 +13,8 @@ import {
   useEditorBridge,
   ColorKeyboard,
   CustomKeyboard,
+  CoreBridge,
+  TenTapStartKit,
 } from '@10play/tentap-editor';
 
 const exampleStyles = StyleSheet.create({
@@ -27,12 +29,12 @@ const exampleStyles = StyleSheet.create({
 });
 
 // Todo: add example with custom font
-// const customFont = `
-// @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
-// * {
-//   font-family: 'Roboto', sans-serif;
-// }
-// `;
+const customFont = `
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
+* {
+  font-family: 'Roboto', sans-serif;
+}
+`;
 
 const initialContent = `<p>This is a basic <a href="https://google.com">example</a> of implementing images.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" /><p>s</p>`;
 
@@ -42,6 +44,7 @@ export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
     DEV: true,
     avoidIosKeyboard: true,
     initialContent,
+    bridgeExtensions: [...TenTapStartKit, CoreBridge.configureCSS(customFont)],
   });
 
   const rootRef = useRef(null);

src/RichText/useEditorBridge.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import WebView from 'react-native-webview';
 import {
   type EditorActionMessage,
@@ -9,6 +9,7 @@ import { EditorHelper } from './EditorHelper';
 import type { EditorBridge } from '../types';
 import type BridgeExtension from '../bridges/base';
 import { TenTapStartKit } from '../bridges/StarterKit';
+import { uniqueBy } from '../utils';
 
 type Subscription<T> = (cb: (val: T) => void) => () => void;
 
@@ -21,12 +22,17 @@ export const useEditorBridge = (options?: {
   DEV?: boolean;
   DEV_SERVER_URL?: string;
 }): EditorBridge => {
-  const bridgeExtensions = options?.bridgeExtensions || TenTapStartKit;
   const webviewRef = useRef<WebView>(null);
   // Till we will implement default per bridgeExtension
   const editorStateRef = useRef<EditorNativeState | {}>({});
   const editorStateSubsRef = useRef<((state: EditorNativeState) => void)[]>([]);
 
+  const bridgeExtensions = useMemo(() => {
+    const extensions = options?.bridgeExtensions || TenTapStartKit;
+    // Filter out duplicates
+    return uniqueBy(extensions, 'name');
+  }, [options?.bridgeExtensions]);
+
   const _updateEditorState = (editorState: EditorNativeState) => {
     editorStateRef.current = editorState;
     editorStateSubsRef.current.forEach((sub) => sub(editorState));

src/utils/index.ts

@@ -1 +1,2 @@
 export * from './useKeyboard';
+export * from './uniqueBy';

src/utils/uniqueBy.ts

@@ -0,0 +1,15 @@
+export function uniqueBy<T, K extends keyof T>(
+  items: T[],
+  keyOrFn: K | ((item: T) => any)
+): T[] {
+  const keyFn =
+    typeof keyOrFn === 'function' ? keyOrFn : (item: T) => item[keyOrFn];
+  const seen = new Map<any, T>();
+  items.forEach((item) => {
+    const key = keyFn(item);
+    if (!seen.has(key)) {
+      seen.set(key, item);
+    }
+  });
+  return Array.from(seen.values());
+}

website/docs/examples/basic.md

@@ -8,23 +8,22 @@ In this example we will be creating a basic editor that contains all of the pre-
 
 ## Creating The Editor Bridge
 
-The first thing we want to do is create our EditorBridge #todo add link to editor bridge.
-To do this we will use the `useEditorBridge` hook in our component
+The first thing we want to do is create our [EditorBridge](../api/EditorBridge.md) add link to editor bridge.
+To do this we will use the `useEditorBridge` hook in our component. This by default will contain the `TenTapStartKit` (#TODO show link)
+Now we have added all of the pre-built bridgeExtensions provided by tentap, and our editor will support all of these bridgeExtensions features
 
 ```tsx
 const editor = useEditorBridge();
 ```
 
-<!-- TODO: not need to pass bridgeExtensions anymore -->
-
-This is not enough however as it is just an empty editor with no bridgeExtensions so let's add some
+This is the same ass passing
 
 ```tsx
-const editor = useEditorBridge({});
+const editor = useEditorBridge({
+  bridgeExtensions: TenTapStarterKit,
+});
 ```
 
-Now we have added all of the pre-built bridgeExtensions provided by tentap, and our editor will support all of these bridgeExtensions features
-
 ## Adding the RichText component
 
 Now we will add our RichText component, this is simply a WebView that runs a pre-built tiptap bundle with some extensions, that is then communicated with via our bridgeExtensions
@@ -92,18 +91,17 @@ const customFont = `
 `;
 ```
 
-Now we can override a bridgeExtensions css with the `configureCSS` function. The `core` bridgeExtensions css is reserved for custom extensions
-so we will configure it.
+Now we can override a bridgeExtensions css with the `configureCSS` function. First we need to add the `CoreBridge`, this bridge's css is reserved for custom extensions.
+And then all we have to do is configure it.
 
 ```tsx
 const editor = useEditorBridge({
-    bridgeExtensions: [
-        // If we want to add custom css - we can configure it here on the core bridge
-        CoreBridge.configureCSS(customFont),
-        TenTapStartKit,
-        ...
-    ],
-  });
+  bridgeExtensions: [
+    // If we want to add custom css - we can configure it here on the core bridge
+    CoreBridge.configureCSS(customFont),
+    ...TenTapStartKit,
+  ],
+});
 ```
 
 And that is it!