Merge pull request #1940 from maufcost/issue/1926-justified-alignment

Added justified alignment option
ucfopen · Jan 28, 2022 · 8944a18 · 8944a18
2 parents 7c64038 + 2cba045
commit 8944a18
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 6 deletions.
diff --git a/...o-document-engine/__tests__/oboeditor/components/__snapshots__/visual-editor.test.js.snap b/...o-document-engine/__tests__/oboeditor/components/__snapshots__/visual-editor.test.js.snap
@@ -836,6 +836,23 @@ Ctrl+Shift+R"
           />
         </svg>
       </button>
+      <button
+        aria-label="Justify
+Ctrl+Shift+J"
+        className=" is-not-selected"
+        onClick={[Function]}
+        title="Justify
+Ctrl+Shift+J"
+      >
+        <svg
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z"
+          />
+        </svg>
+      </button>
       <button
         aria-label="Indent
 Ctrl+Alt+Tab"
@@ -1462,6 +1479,23 @@ Ctrl+Shift+R"
           />
         </svg>
       </button>
+      <button
+        aria-label="Justify
+Ctrl+Shift+J"
+        className=" is-not-selected"
+        onClick={[Function]}
+        title="Justify
+Ctrl+Shift+J"
+      >
+        <svg
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z"
+          />
+        </svg>
+      </button>
       <button
         aria-label="Indent
 Ctrl+Alt+Tab"
@@ -2088,6 +2122,23 @@ Ctrl+Shift+R"
           />
         </svg>
       </button>
+      <button
+        aria-label="Justify
+Ctrl+Shift+J"
+        className=" is-not-selected"
+        onClick={[Function]}
+        title="Justify
+Ctrl+Shift+J"
+      >
+        <svg
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z"
+          />
+        </svg>
+      </button>
       <button
         aria-label="Indent
 Ctrl+Alt+Tab"
@@ -2760,6 +2811,23 @@ Ctrl+Shift+R"
           />
         </svg>
       </button>
+      <button
+        aria-label="Justify
+Ctrl+Shift+J"
+        className=" is-not-selected"
+        onClick={[Function]}
+        title="Justify
+Ctrl+Shift+J"
+      >
+        <svg
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z"
+          />
+        </svg>
+      </button>
       <button
         aria-label="Indent
 Ctrl+Alt+Tab"
@@ -3382,6 +3450,23 @@ Ctrl+Shift+R"
           />
         </svg>
       </button>
+      <button
+        aria-label="Justify
+Ctrl+Shift+J"
+        className=" is-not-selected"
+        onClick={[Function]}
+        title="Justify
+Ctrl+Shift+J"
+      >
+        <svg
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z"
+          />
+        </svg>
+      </button>
       <button
         aria-label="Indent
 Ctrl+Alt+Tab"

diff --git a/...ages/app/obojobo-document-engine/__tests__/oboeditor/components/marks/align-marks.test.js b/...ages/app/obojobo-document-engine/__tests__/oboeditor/components/marks/align-marks.test.js
@@ -6,6 +6,7 @@ import AlignMarks from '../../../../src/scripts/oboeditor/components/marks/align
 const ALIGN_RIGHT = 'right'
 const ALIGN_CENTER = 'center'
 const ALIGN_LEFT = 'left'
+const ALIGN_JUSTIFY = 'justify'
 
 describe('AlignMarks', () => {
 	test('onKeyDown does not toggle mark if wrong key is pressed', () => {
@@ -86,6 +87,22 @@ describe('AlignMarks', () => {
 		expect(mockChange.setAlign).toHaveBeenCalledWith(ALIGN_CENTER)
 	})
 
+	test('onKeyDown toggles Center if CTRL/CMD + Shift + J is pressed', () => {
+		const mockChange = {
+			setAlign: jest.fn()
+		}
+		const mockEvent = {
+			ctrlKey: true,
+			shiftKey: true,
+			key: 'j',
+			preventDefault: jest.fn()
+		}
+
+		AlignMarks.plugins.onKeyDown(mockEvent, mockChange, jest.fn())
+
+		expect(mockChange.setAlign).toHaveBeenCalledWith(ALIGN_JUSTIFY)
+	})
+
 	test('setAlign changes the alignment of Text nodes and other nodes', () => {
 		jest.spyOn(Transforms, 'setNodes').mockReturnValue(true)
 
@@ -123,6 +140,6 @@ describe('AlignMarks', () => {
 			mark.action(editor)
 		})
 
-		expect(editor.setAlign).toHaveBeenCalledTimes(3)
+		expect(editor.setAlign).toHaveBeenCalledTimes(4)
 	})
 })
diff --git a/...engine/__tests__/oboeditor/components/toolbars/__snapshots__/content-toolbar.test.js.snap b/...engine/__tests__/oboeditor/components/toolbars/__snapshots__/content-toolbar.test.js.snap
@@ -25,7 +25,9 @@ Ctrl+Shift+L\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32
 Ctrl+Shift+E\\" aria-label=\\"Center Align
 Ctrl+Shift+E\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M10.4,13h11.2v1H10.4V13z M10.4,23h11.2v1H10.4V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Right Align
 Ctrl+Shift+R\\" aria-label=\\"Right Align
-Ctrl+Shift+R\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13H25v1H13.8V13z M13.8,23H25v1H13.8V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Indent
+Ctrl+Shift+R\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13H25v1H13.8V13z M13.8,23H25v1H13.8V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Justify
+Ctrl+Shift+J\\" aria-label=\\"Justify
+Ctrl+Shift+J\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Indent
 Ctrl+Alt+Tab\\" aria-label=\\"Indent
 Ctrl+Alt+Tab\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M10.7 8.5L8.8 10 7 11.5v-6L8.8 7z\\"></path><path class=\\"icon\\" d=\\"M13.8 8H25v1H13.8zM7 13h18v1H7zm0 5h18v1H7zm0 5h18v1H7z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Unindent
 Ctrl+Shift+Tab\\" aria-label=\\"Unindent
@@ -61,7 +63,9 @@ exports[`Content Toolbar Toolbar node calls the action for a button 1`] = `
 ⌘+Shift+E\\" aria-label=\\"Center Align
 ⌘+Shift+E\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M10.4,13h11.2v1H10.4V13z M10.4,23h11.2v1H10.4V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Right Align
 ⌘+Shift+R\\" aria-label=\\"Right Align
-⌘+Shift+R\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13H25v1H13.8V13z M13.8,23H25v1H13.8V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Indent
+⌘+Shift+R\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13H25v1H13.8V13z M13.8,23H25v1H13.8V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Justify
+⌘+Shift+J\\" aria-label=\\"Justify
+⌘+Shift+J\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Indent
 ⌘+Alt+Tab\\" aria-label=\\"Indent
 ⌘+Alt+Tab\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M10.7 8.5L8.8 10 7 11.5v-6L8.8 7z\\"></path><path class=\\"icon\\" d=\\"M13.8 8H25v1H13.8zM7 13h18v1H7zm0 5h18v1H7zm0 5h18v1H7z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Unindent
 ⌘+Shift+Tab\\" aria-label=\\"Unindent
@@ -97,7 +101,9 @@ exports[`Content Toolbar Toolbar node for Mac 1`] = `
 ⌘+Shift+E\\" aria-label=\\"Center Align
 ⌘+Shift+E\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M10.4,13h11.2v1H10.4V13z M10.4,23h11.2v1H10.4V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Right Align
 ⌘+Shift+R\\" aria-label=\\"Right Align
-⌘+Shift+R\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13H25v1H13.8V13z M13.8,23H25v1H13.8V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Indent
+⌘+Shift+R\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13H25v1H13.8V13z M13.8,23H25v1H13.8V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Justify
+⌘+Shift+J\\" aria-label=\\"Justify
+⌘+Shift+J\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path d=\\"M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Indent
 ⌘+Alt+Tab\\" aria-label=\\"Indent
 ⌘+Alt+Tab\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 32 32\\"><path class=\\"icon\\" d=\\"M10.7 8.5L8.8 10 7 11.5v-6L8.8 7z\\"></path><path class=\\"icon\\" d=\\"M13.8 8H25v1H13.8zM7 13h18v1H7zm0 5h18v1H7zm0 5h18v1H7z\\"></path></svg></button><button class=\\" is-not-selected\\" title=\\"Unindent
 ⌘+Shift+Tab\\" aria-label=\\"Unindent

diff --git a/...ent-engine/__tests__/oboeditor/components/toolbars/__snapshots__/format-menu.test.js.snap b/...ent-engine/__tests__/oboeditor/components/toolbars/__snapshots__/format-menu.test.js.snap
@@ -21,7 +21,8 @@ Ctrl+Shift+6</span></button><button>Code<span>
 Ctrl+Shift+C</span></button></div></div><div class=\\"dropdown  is-not-open\\" tabindex=\\"-1\\"><button class=\\"menu-title\\">Align &amp; indent</button><div class=\\"menu-items\\"><button>Left Align<span>
 Ctrl+Shift+L</span></button><button>Center Align<span>
 Ctrl+Shift+E</span></button><button>Right Align<span>
-Ctrl+Shift+R</span></button><button>Indent<span>
+Ctrl+Shift+R</span></button><button>Justify<span>
+Ctrl+Shift+J</span></button><button>Indent<span>
 Alt+Tab</span></button><button>Unindent<span>
 Shift+Tab</span></button><button>Hanging Indent<span>
 Ctrl+H</span></button></div></div></div></div></div>"

diff --git a/...s/app/obojobo-document-engine/__tests__/oboeditor/components/toolbars/format-menu.test.js b/...s/app/obojobo-document-engine/__tests__/oboeditor/components/toolbars/format-menu.test.js
@@ -118,7 +118,7 @@ describe('FormatMenu', () => {
 
 		component
 			.find('button')
-			.at(25)
+			.at(26)
 			.simulate('click')
 
 		expect(useEditor().unindentList).toHaveBeenCalled()

diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/assets/justify-icon.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/assets/justify-icon.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const JustifyIcon = () => {
+	return (
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+			<path d="M7,8h18v1H7V8z M7,18h18v1H7V18z M13.8,13h11.2v1H7V13z M13.8,23h11.2v1H7V23z" />
+		</svg>
+	)
+}
+
+export default JustifyIcon
diff --git a/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/marks/align-marks.js b/packages/app/obojobo-document-engine/src/scripts/oboeditor/components/marks/align-marks.js
@@ -4,10 +4,12 @@ import { ReactEditor } from 'slate-react'
 import LeftIcon from '../../assets/left-icon'
 import RightIcon from '../../assets/right-icon'
 import CenterIcon from '../../assets/center-icon'
+import JustifyIcon from '../../assets/justify-icon'
 
 const ALIGN_RIGHT = 'right'
 const ALIGN_CENTER = 'center'
 const ALIGN_LEFT = 'left'
+const ALIGN_JUSTIFY = 'justify'
 
 const AlignMarks = {
 	plugins: {
@@ -25,6 +27,9 @@ const AlignMarks = {
 				case 'e':
 					event.preventDefault()
 					return editor.setAlign(ALIGN_CENTER)
+				case 'j':
+					event.preventDefault()
+					return editor.setAlign(ALIGN_JUSTIFY)
 			}
 		},
 		commands: {
@@ -65,6 +70,13 @@ const AlignMarks = {
 			type: ALIGN_RIGHT,
 			icon: RightIcon,
 			action: editor => editor.setAlign(ALIGN_RIGHT)
+		},
+		{
+			name: 'Justify',
+			shortcut: 'Shift+J',
+			type: ALIGN_JUSTIFY,
+			icon: JustifyIcon,
+			action: editor => editor.setAlign(ALIGN_JUSTIFY)
 		}
 	]
 }

diff --git a/packages/obonode/obojobo-chunks-text/viewer-component.scss b/packages/obonode/obojobo-chunks-text/viewer-component.scss
@@ -8,4 +8,9 @@
 	.obo-text {
 		display: block;
 	}
+
+	.align-justify {
+		text-align: justify;
+		white-space: pre-line;
+	}
 }