Big Refactor and multiline support

Author: tomrule007

components/MarkdownToolbar.tsx

@@ -25,94 +25,179 @@ type StyleArgs = {
   multiline?: boolean
   surroundWithNewLines?: boolean
 }
-type ApplyMarkdown = (
-  inputRef: React.RefObject<HTMLTextAreaElement>,
+
+const applyMarkdown = (
+  textarea: HTMLTextAreaElement,
   styleArgs: StyleArgs
-) => void
-const applyMarkdown: ApplyMarkdown = (
-  inputRef,
-  {
+): void => {
+  if (!textarea) return
+
+  const {
     prefix = '',
     suffix = '',
     blockPrefix = '',
     blockSuffix = '',
     multiline = false,
     surroundWithNewLines = false
-  } = {}
-) => {
-  if (!inputRef.current) return
-  const { value, selectionStart, selectionEnd } = inputRef.current
+  } = styleArgs
 
-  const leftOfSelection = value.slice(0, selectionStart)
-  const selection = value.slice(selectionStart, selectionEnd)
-  const rightOfSelection = value.slice(selectionEnd)
-  inputRef.current.focus()
+  const { value, selectionStart, selectionEnd } = textarea
+
+  const left = value.slice(0, selectionStart)
+  const selectionLines = value.slice(selectionStart, selectionEnd).split('\n')
+  const right = value.slice(selectionEnd)
+  textarea.focus()
+
+  // If multiline selection use blockPrefix/blockSuffix if provided
+  const [selectedPrefix, selectedSuffix] =
+    selectionLines.length > 1
+      ? [blockPrefix || prefix, blockSuffix || suffix]
+      : [prefix, suffix]
 
   // If Style is already applied remove it
-  if (leftOfSelection.endsWith(prefix) && rightOfSelection.startsWith(suffix)) {
-    // expand selection to include prefix and suffix
-    inputRef.current.setSelectionRange(
-      selectionStart - prefix.length,
-      selectionEnd + suffix.length
-    )
 
-    insertText(inputRef.current, selection)
+  const action = detectActionType({
+    left,
+    selectionLines,
+    right,
+    selectedPrefix,
+    selectedSuffix,
+    multiline
+  })
 
-    // update selection with removed prefix
-    inputRef.current.setSelectionRange(
-      selectionStart - prefix.length,
-      selectionEnd - prefix.length
-    )
-  } else {
-    // apply style updates
+  console.log({ action })
+
+  switch (action) {
+    case 'removeSingle':
+      textarea.setSelectionRange(
+        selectionStart - selectedPrefix.length,
+        selectionEnd + selectedSuffix.length
+      )
+
+      insertText(textarea, selectionLines.join('\n'))
 
-    let newText = prefix + selection + suffix
+      // update selection with removed prefix
+      textarea.setSelectionRange(
+        selectionStart - selectedPrefix.length,
+        selectionEnd - selectedPrefix.length
+      )
+      break
+    case 'removeMulti':
+      insertText(
+        textarea,
+        selectionLines
+          .map(line =>
+            line.slice(
+              selectedPrefix.length,
+              line.length - selectedSuffix.length
+            )
+          )
+          .join('\n')
+      )
+      textarea.selectionStart = selectionStart
 
-    if (surroundWithNewLines)
-      newText = newLineSurround(leftOfSelection, rightOfSelection, newText)
+      break
+    default:
+      // Handle both add cases 'addSingle' & 'addMulti'
+      let newText =
+        action === 'addMulti'
+          ? styleEachLine(prefix, suffix, selectionLines)
+          : selectedPrefix + selectionLines.join('\n') + selectedSuffix
 
-    insertText(inputRef.current, newText)
+      let newPrefixLineCount = 0
+      if (surroundWithNewLines) {
+        newPrefixLineCount = !left ? 0 : 2 - left.match(/\n*$/)![0].length
+        newText = newLineSurround(left, right, newText)
+      }
 
-    /// update selection with added prefix and added newlines
+      // Insert Selection Text
+      insertText(textarea, newText)
 
-    const addedNewLines =
-      !surroundWithNewLines || !leftOfSelection
-        ? 0
-        : 2 - leftOfSelection.match(/\n*$/)![0].length
+      // Update Selection Cursor
+      let startOffset = newPrefixLineCount
+      let endOffset = newPrefixLineCount
+      if (action === 'addMulti') {
+        //In multiline update we want the selection to include the added prefix so we dont update the start postion
+        endOffset +=
+          selectionLines.length *
+          (selectedPrefix.length + selectedSuffix.length)
+      } else {
+        startOffset += selectedPrefix.length
+        endOffset += selectedPrefix.length
+      }
 
-    inputRef.current.setSelectionRange(
-      selectionStart + prefix.length + addedNewLines,
-      selectionEnd + prefix.length + addedNewLines
+      textarea.setSelectionRange(
+        selectionStart + startOffset,
+        selectionEnd + endOffset
+      )
+      break
+  }
+}
+
+type StyleDetectionInput = {
+  left: string
+  selectionLines: string[]
+  right: string
+  selectedPrefix: string
+  selectedSuffix: string
+  multiline: boolean
+}
+type ActionTypes = 'addMulti' | 'addSingle' | 'removeSingle' | 'removeMulti'
+
+export const detectActionType = ({
+  left,
+  selectionLines,
+  right,
+  selectedPrefix,
+  selectedSuffix,
+  multiline
+}: StyleDetectionInput): ActionTypes => {
+  if (
+    (!multiline || selectionLines.length === 1) &&
+    left.endsWith(selectedPrefix) &&
+    right.startsWith(selectedSuffix)
+  )
+    return 'removeSingle'
+
+  if (multiline && selectionLines.length > 1) {
+    const linesAreStyled = selectionLines.every(
+      line => line.startsWith(selectedPrefix) && line.endsWith(selectedSuffix)
     )
+
+    return linesAreStyled ? 'removeMulti' : 'addMulti'
   }
+
+  return 'addSingle'
 }
 
-export function newLineSurround(
-  leftOfSelection: string,
-  rightOfSelection: string,
+export const styleEachLine = (
+  prefix: string,
+  suffix: string,
+  lines: string[]
+): string => lines.map(line => prefix + line + suffix).join('\n')
+
+// Do not add new lines if text is at the start or end of the input
+export const newLineSurround = (
+  left: string,
+  right: string,
   text: string
-): string {
-  // If left or right are empty strings meaning the text is at the beginning or end
-  // of the textarea so don't add new lines in that case.
-  // Else make sure there are at least 2 new lines
+): string => {
   return (
-    '\n'.repeat(
-      !leftOfSelection ? 0 : 2 - leftOfSelection.match(/\n*$/)![0].length
-    ) +
+    '\n'.repeat(!left ? 0 : 2 - left.match(/\n*$/)![0].length) +
     text +
-    '\n'.repeat(
-      !rightOfSelection ? 0 : 2 - rightOfSelection.match(/^\n*/)![0].length
-    )
+    '\n'.repeat(!right ? 0 : 2 - right.match(/^\n*/)![0].length)
   )
 }
 
-export function insertText(textArea: HTMLTextAreaElement, text: string) {
+export const insertText = (
+  textArea: HTMLTextAreaElement,
+  text: string
+): void => {
   // Detect bug case with chrome automatically removing linefeed character
   // when replace all the text on last line with empty string
-  const leftOfSelection = textArea.value[textArea.selectionStart - 1]
-  const rightOfSelection = textArea.value[textArea.selectionEnd + 1]
-  const isChromeBugCase =
-    text === '' && leftOfSelection === '\n' && rightOfSelection === undefined
+  const left = textArea.value[textArea.selectionStart - 1]
+  const right = textArea.value[textArea.selectionEnd + 1]
+  const isChromeBugCase = text === '' && left === '\n' && right === undefined
 
   // Expand selection to include line feed in bug case
   if (isChromeBugCase) textArea.selectionStart = textArea.selectionStart - 1
@@ -138,7 +223,7 @@ const buttons = [
   },
   {
     tooltipTitle: 'Add italic text',
-    styleArgs: { prefix: '_', suffix: '_' },
+    styleArgs: { prefix: ' _', suffix: '_ ' }, // Must include space for style to work
     Icon: ItalicIcon
   },
   {
@@ -151,8 +236,8 @@ const buttons = [
     styleArgs: {
       prefix: '`',
       suffix: '`',
-      blockPrefix: '```',
-      blockSuffix: '```'
+      blockPrefix: '```\n',
+      blockSuffix: '\n```'
     },
     Icon: CodeIcon
   },
@@ -173,7 +258,11 @@ const buttons = [
   },
   {
     tooltipTitle: 'Add a task list',
-    styleArgs: { prefix: '- [ ] ', surroundWithNewLines: true },
+    styleArgs: {
+      prefix: '- [ ] ',
+      surroundWithNewLines: true,
+      multiline: true
+    },
     Icon: TasklistIcon
   }
 ]
@@ -202,7 +291,7 @@ const MarkdownToolbar: React.FC<Props & ButtonToolbarProps> = ({
                 {...triggerHandler}
                 ref={ref}
                 aria-label={tooltipTitle}
-                onClick={() => applyMarkdown(inputRef, styleArgs)}
+                onClick={() => applyMarkdown(inputRef.current, styleArgs)}
               >
                 <Icon size={'small'} />
               </button>