Saving progress

can realign only paragraph who add a change, however if all the words were to be changed in paragraph, even with same numbeer of words, it seems to hang. Also had to disable edge cases around merging paragraphs, splitting paragraphs,and deleting across paragraphs. Can only delete within a single paragraph for now

Author: Pietro Passarelli

docs/notes/insert-slate-functions.md

@@ -0,0 +1,12 @@
+```js
+const breakParagraph = () => {
+  Editor.insertBreak(editor);
+};
+const insertTextInaudible = () => {
+  Transforms.insertText(editor, '[INAUDIBLE]');
+};
+
+const handleInsertMusicNote = () => {
+  Transforms.insertText(editor, '♫'); // or ♪
+};
+```

package-lock.json

@@ -58,18 +58,19 @@
     "@fortawesome/react-fontawesome": "^0.1.5",
     "@storybook/addon-storysource": "^5.3.18",
     "docx": "4.7.1",
+    "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
     "react-bootstrap": "^1.0.1",
     "sbd": "^1.0.18",
     "slate": "^0.59.0",
     "slate-history": "^0.59.0",
     "slate-react": "^0.59.0",
     "smpte-timecode": "^1.2.3",
-    "stt-align-node": "^1.1.8"
+    "stt-align-node": "^1.1.10"
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
   }
-}
+}

package.json

@@ -149,17 +149,6 @@ export default function SlateTranscriptEditor(props) {
     return tmpMediaType;
   };
 
-  const breakParagraph = () => {
-    Editor.insertBreak(editor);
-  };
-  const insertTextInaudible = () => {
-    Transforms.insertText(editor, '[INAUDIBLE]');
-  };
-
-  const handleInsertMusicNote = () => {
-    Transforms.insertText(editor, '♫'); // or ♪
-  };
-
   const handleSetShowSpeakersCheatShet = () => {
     setShowSpeakersCheatShet(!showSpeakersCheatShet);
   };
@@ -336,6 +325,7 @@ export default function SlateTranscriptEditor(props) {
 
   // TODO: refacto this function, to be cleaner and easier to follow.
   const handleRestoreTimecodes = async (inlineTimecodes = false) => {
+    console.log('handleRestoreTimecodes');
     if (!isContentModified && !inlineTimecodes) {
       return value;
     }
@@ -416,7 +406,52 @@ export default function SlateTranscriptEditor(props) {
     setIsPauseWhiletyping(!isPauseWhiletyping);
   };
 
+  // TODO: revisit logic for
+  // - splitting paragraph via enter key
+  // - merging paragraph via delete
+  // - merging paragraphs via deleting across paragraphs
   const handleOnKeyDown = (event) => {
+    console.log('event.key', event.key);
+    if (event.key === 'Enter') {
+      // intercept Enter, and
+      event.preventDefault();
+      console.log('disabling enter/paragraph split while tweaking alignment');
+      console.log('For now cdisabling enter key to split a paragraph, while figuring out the aligment issue');
+      return;
+      const selection = editor.selection;
+      console.log('selection', selection);
+      const orderedSelection = [selection.anchor, selection.focus].sort((a, b) => {
+        return a.path[0] - b.path[0];
+      });
+
+      const selectionStart = orderedSelection[0];
+      const selectionEnd = orderedSelection[1];
+      const currentParagraph = editor.children[selectionStart.path[0]];
+      console.log('selectionStart.path[0]', selectionStart.path[0]);
+      console.log('currentParagraph', currentParagraph);
+      // Editor.insertBreak(editor);
+      // Transforms.splitNodes(editor);
+      // const element = { type: 'image', url, children: [{ text: '' }] };
+      Editor.deleteFragment(editor, selectionStart.path[0]);
+      const { startSec, endSec } = getSelectionNodes(editor, editor.selection);
+    }
+    if (event.key === 'Backspace') {
+      const selection = editor.selection;
+      console.log('selection', selection);
+      console.log(selection.anchor.path[0], selection.focus.path[0]);
+      // across paragraph
+      if (selection.anchor.path[0] !== selection.focus.path[0]) {
+        console.log('For now cannot merge paragraph via delete across paragraphs, while figuring out the aligment issue');
+        event.preventDefault();
+        return;
+      }
+      // beginning of a paragrraph
+      if (selection.anchor.offset === 0 && selection.focus.offset === 0) {
+        console.log('For now cannot merge paragraph via delete, while figuring out the aligment issue');
+        event.preventDefault();
+        return;
+      }
+    }
     setIsContentIsModified(true);
     if (isPauseWhiletyping) {
       // logic for pause while typing
@@ -852,6 +887,7 @@ export default function SlateTranscriptEditor(props) {
                   disabled={isProcessing}
                   onClick={async () => {
                     try {
+                      console.log('faSync');
                       setIsProcessing(true);
                       await handleRestoreTimecodes();
                     } finally {

src/components/index.js

@@ -45,6 +45,7 @@ export const createDpeParagraphsFromSlateJs = (currentContent, newEntities) => {
  */
 const converSlateToDpe = (currentContent, words) => {
   const alignedWords = updateTimestampsHelper(currentContent, words);
+  console.log('alignedWords', alignedWords);
   const updatedContent = createDpeParagraphsFromSlateJs(currentContent, alignedWords);
   return { words: alignedWords, paragraphs: updatedContent };
 };

src/util/export-adapters/slate-to-dpe/index.js

@@ -26,7 +26,7 @@ export const createSlateContentFromSlateJsParagraphs = (currentContent, newEntit
     const wordsInBlock = countWords(text);
     const blockEntites = newEntities.slice(totalWords, totalWords + wordsInBlock);
     let speaker = block.speaker;
-    console.log('blockEntites', blockEntites);
+    // console.log('blockEntites', blockEntites);
     const start = parseFloat(blockEntites[0].start);
     const end = parseFloat(blockEntites[blockEntites.length - 1].end);
     const currentParagraph = { start, end };
@@ -60,10 +60,8 @@ export const createSlateContentFromSlateJsParagraphs = (currentContent, newEntit
  * @return slateJS value
  */
 const updateTimestamps = (currentContent, words) => {
-  const alignedWords = updateTimestampsHelper(currentContent, words);
-  // TODO: there seem to be some words without text attribute, so doing a quick fix clean up
-
-  const updatedContent = createSlateContentFromSlateJsParagraphs(currentContent, alignedWords);
+  const updatedContent = updateTimestampsHelper(currentContent, words);
+  // const updatedContent = createSlateContentFromSlateJsParagraphs(currentContent, alignedWords);
   return updatedContent;
 };
 

src/util/export-adapters/slate-to-dpe/update-timestamps/index.js

@@ -6,31 +6,63 @@
 import { alignSTT } from 'stt-align-node';
 // import alignSTT from '../../../stt-align-node';
 import slateToText from '../../txt';
-// Yo
+import convertDpeToSlate from '../../../dpe-to-slate';
+import { shortTimecode } from '../../../timecode-converter/index.js';
+import _ from 'lodash';
+// import difference from 'lodash/difference';
+
+function comparator(object, other) {
+  return _.isEqual(object.children[0].text, other.children[0].text);
+}
+
 /**
  * Update timestamps usign stt-align module
  * @param {*} currentContent - slate js value
  * @param {*} words - list of stt words
  * @return slateJS value
  */
+// TODO: in stt-align-node if all the words are completely diff, it seems to freeze.
+// Look into why in stt-align-node github repo etc..
 export const updateTimestampsHelper = (currentContent, dpeTranscript) => {
+  // TODO: figure out if can remove the cloneDeep option
+  const newCurrentContent = _.cloneDeep(currentContent);
   // trying to align only text that changed
 
-  // covert t=slate to text to use alignment module
-  const currentText = slateToText({
-    value: currentContent,
-    speakers: false,
-    timecodes: false,
-    atlasFormat: false,
+  // TODO: ideally, you save the slate converted content in the parent component when
+  // component is initialized so don't need to re-convert this from dpe all the time.
+  const originalContentSlateFormat = convertDpeToSlate(dpeTranscript);
+
+  // TODO: add the ID further upstream to be able to skip this step.
+  // we are adding the index for the paragraph,to be able to update the words attribute in the paragraph and easily replace that paragraph in the
+  // slate editor content.
+  // Obv this wouldn't work, if re-enable the edge cases, disabled above in handleOnKeyDown
+  const currentSlateContentWithId = currentContent.map((paragraph, index) => {
+    const newParagraph = { ...paragraph };
+    newParagraph.id = index;
+    return newParagraph;
   });
-  const alignedWords = alignSTT(dpeTranscript, currentText);
-  // clean up
-  const alignedWordsCleanedUp = alignedWords.filter((word) => {
-    if (word.text) {
-      return word;
-    }
+  const diffParagraphs = _.differenceWith(currentSlateContentWithId, originalContentSlateFormat, comparator);
+
+  diffParagraphs.forEach((diffParagraph) => {
+    // TODO: figure out if can remove the cloneDeep option
+    let newDiffParagraph = _.cloneDeep(diffParagraph);
+    let alignedWordsTest = alignSTT(newDiffParagraph.children[0], newDiffParagraph.children[0].text);
+    newDiffParagraph.children[0].words = alignedWordsTest;
+    // also adjust paragraph timecode
+    newDiffParagraph.start = alignedWordsTest[0].start;
+    newDiffParagraph.startTimecode = shortTimecode(alignedWordsTest[0].start);
+    newCurrentContent[newDiffParagraph.id] = newDiffParagraph;
   });
-  return alignedWordsCleanedUp;
+
+  // covert slate to text to use alignment module
+  // const currentText = slateToText({
+  //   value: currentContent,
+  //   speakers: false,
+  //   timecodes: false,
+  //   atlasFormat: false,
+  // });
+  // const alignedWords = alignSTT(dpeTranscript, currentText);
+  return newCurrentContent;
 };
 
 export default updateTimestampsHelper;