react-native-richify 1.0.5 → 1.0.6

package/src/constants/defaultStyles.ts

@@ -176,13 +176,12 @@ export const DEFAULT_TOOLBAR_ITEMS: ToolbarItem[] = [
   { id: 'h1', label: 'H1', heading: 'h1' },
   { id: 'h2', label: 'H2', heading: 'h2' },
   { id: 'h3', label: 'H3', heading: 'h3' },
-  { id: 'bullet', label: '\u2022', listType: 'bullet' },
-  { id: 'ordered', label: '1.', listType: 'ordered' },
-  { id: 'link', label: 'Link', actionType: 'link' },
-  { id: 'image', label: 'Img', actionType: 'image' },
-  { id: 'align-left', label: 'L', textAlign: 'left' },
-  { id: 'align-center', label: 'C', textAlign: 'center' },
-  { id: 'align-right', label: 'R', textAlign: 'right' },
+  { id: 'bullet', label: '\u2022\u2261', listType: 'bullet' },
+  { id: 'ordered', label: '1\u2261', listType: 'ordered' },
+  { id: 'link', label: '\ud83d\udd17', actionType: 'link' },
+  { id: 'align-left', label: '\u21e4', textAlign: 'left' },
+  { id: 'align-center', label: '\u2194', textAlign: 'center' },
+  { id: 'align-right', label: '\u21e5', textAlign: 'right' },
   { id: 'format-markdown', label: 'MD', outputFormat: 'markdown' },
   { id: 'format-html', label: 'HTML', outputFormat: 'html' },
   { id: 'preview-literal', label: 'Raw', outputPreviewMode: 'literal' },

package/src/hooks/useFormatting.ts

@@ -112,15 +112,28 @@ export function useFormatting({
 
   const setListType = useCallback(
     (listType: ListType) => {
+      const currentListType =
+        selection.start === selection.end
+          ? getSelectionStyle(segments, selection).listType ??
+            activeStyles.listType
+          : getSelectionStyle(segments, selection).listType;
+      const nextListType: ListType =
+        currentListType === listType ? 'none' : listType;
+
       if (selection.start === selection.end) {
         onActiveStylesChange({
           ...activeStyles,
-          listType: listType === 'none' ? undefined : listType,
-          heading: listType === 'none' ? activeStyles.heading : undefined,
+          listType: nextListType === 'none' ? undefined : nextListType,
+          heading:
+            nextListType === 'none' ? activeStyles.heading : undefined,
         });
       }
 
-      const newSegments = setListTypeOnLine(segments, selection, listType);
+      const newSegments = setListTypeOnLine(
+        segments,
+        selection,
+        nextListType,
+      );
       onSegmentsChange(newSegments);
     },
     [
@@ -134,14 +147,26 @@ export function useFormatting({
 
   const setTextAlign = useCallback(
     (textAlign: TextAlign) => {
+      const currentTextAlign =
+        selection.start === selection.end
+          ? getSelectionStyle(segments, selection).textAlign ??
+            activeStyles.textAlign
+          : getSelectionStyle(segments, selection).textAlign;
+      const nextTextAlign =
+        currentTextAlign === textAlign ? undefined : textAlign;
+
       if (selection.start === selection.end) {
         onActiveStylesChange({
           ...activeStyles,
-          textAlign,
+          textAlign: nextTextAlign,
         });
       }
 
-      const newSegments = setTextAlignOnLine(segments, selection, textAlign);
+      const newSegments = setTextAlignOnLine(
+        segments,
+        selection,
+        nextTextAlign,
+      );
       onSegmentsChange(newSegments);
     },
     [

package/src/utils/formatter.ts

@@ -95,7 +95,7 @@ export function setListTypeOnLine(
 export function setTextAlignOnLine(
   segments: StyledSegment[],
   selection: SelectionRange,
-  textAlign: TextAlign,
+  textAlign?: TextAlign,
 ): StyledSegment[] {
   return setLineStyleOnSelection(segments, selection, {
     textAlign,