Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added justified alignment option #1940

Merged
merged 3 commits into from
Jan 28, 2022
Merged

Added justified alignment option #1940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
274574d
Added initial logic for new text alignment option
maufcost Dec 2, 2021
6b5848c
Added unit tests and brought coverage back to 100%
maufcost Dec 7, 2021
2cba045
Added additional white-space config for justified text
maufcost Dec 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 85 additions & 0 deletions ...o-document-engine/__tests__/oboeditor/components/__snapshots__/visual-editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
19 changes: 18 additions & 1 deletion ...ages/app/obojobo-document-engine/__tests__/oboeditor/components/marks/align-marks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -123,6 +140,6 @@ describe('AlignMarks', () => {
mark.action(editor)
})

expect(editor.setAlign).toHaveBeenCalledTimes(3)
expect(editor.setAlign).toHaveBeenCalledTimes(4)
})
})
12 changes: 9 additions & 3 deletions ...engine/__tests__/oboeditor/components/toolbars/__snapshots__/content-toolbar.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion ...ent-engine/__tests__/oboeditor/components/toolbars/__snapshots__/format-menu.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>"
Expand Down
2 changes: 1 addition & 1 deletion ...s/app/obojobo-document-engine/__tests__/oboeditor/components/toolbars/format-menu.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ describe('FormatMenu', () => {

component
.find('button')
.at(25)
.at(26)
.simulate('click')

expect(useEditor().unindentList).toHaveBeenCalled()
Expand Down
11 changes: 11 additions & 0 deletions packages/app/obojobo-document-engine/src/scripts/oboeditor/assets/justify-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
12 changes: 12 additions & 0 deletions packages/app/obojobo-document-engine/src/scripts/oboeditor/components/marks/align-marks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down Expand Up @@ -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)
}
]
}
Expand Down
5 changes: 5 additions & 0 deletions packages/obonode/obojobo-chunks-text/viewer-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,9 @@
.obo-text {
display: block;
}

.align-justify {
text-align: justify;
white-space: pre-line;
}
}