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

Linked headlines refactor #4287

Merged
merged 39 commits into from
Jun 23, 2023
Merged

Linked headlines refactor #4287

Show file tree
Hide file tree
Changes from 33 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
86ece05
remove gh-slugger: use block uids
nileshgulia1 Jan 20, 2023
e8c753c
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 Jan 20, 2023
e355aec
fix scrollToTop conflict, use universalLink in linked anchor
nileshgulia1 Jan 20, 2023
4d34b4e
fix cypress
nileshgulia1 Jan 20, 2023
ab0dd7d
support anchor links in title block,always show link icon in mobile
nileshgulia1 Jan 24, 2023
5e2b535
remove rest props
nileshgulia1 Jan 24, 2023
bf40ad5
add server condition in scrollToTop to prevent calling multiple times…
nileshgulia1 Jan 26, 2023
4665dac
add back github-slugger
nileshgulia1 Jan 30, 2023
f9db2bf
make title block anchor sluggified
nileshgulia1 Jan 30, 2023
1d006f8
adapt slug based scroll in TOC blocks
nileshgulia1 Feb 1, 2023
4296701
switch position of anchor linkSVG
nileshgulia1 Feb 14, 2023
f37ac59
(jest): fix snapshot
nileshgulia1 Feb 14, 2023
915df5c
fix cypress
nileshgulia1 Feb 16, 2023
0c53617
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 Feb 16, 2023
0f97fd3
cypress: fix guillotina tests
nileshgulia1 Feb 17, 2023
878d7cd
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
avoinea Mar 7, 2023
a7da5d4
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 Mar 20, 2023
401fba9
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 Apr 18, 2023
757b389
anchor animation styles
nileshgulia1 Apr 18, 2023
a4cdfd7
fix extra width and smaller icon
nileshgulia1 Apr 18, 2023
126bb38
rotate slug icon and fix animations
nileshgulia1 Apr 18, 2023
ea8e6c1
use vertical-align:middle to align slug icon
nileshgulia1 Apr 18, 2023
2793cf0
fix animations and rotaton
nileshgulia1 Apr 18, 2023
52975f1
fix: do not float anchor svg
nileshgulia1 Apr 21, 2023
b805f13
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 May 17, 2023
dda1208
feat(linkedHeadlines): add useClipboard hook for copy clipboard opera…
nileshgulia1 May 18, 2023
a8e4fab
fix(code-analysis): run prettier
nileshgulia1 May 18, 2023
8b8c073
feat: add docs for linkedHeadlines
nileshgulia1 May 18, 2023
6f7436c
fix(tests): update snapshots
nileshgulia1 May 19, 2023
26bd444
run yarn i18n
nileshgulia1 May 19, 2023
bdd8762
feat: add cypress test for anchors-headings
nileshgulia1 May 19, 2023
51cf4f1
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 Jun 6, 2023
a39122e
chore: update changelog, run i18n
nileshgulia1 Jun 6, 2023
de9e57f
refactor: use headings instead of headlines, resolved comments
nileshgulia1 Jun 9, 2023
8d20016
chore: yarn i18n
nileshgulia1 Jun 9, 2023
c33f634
refactor: support for listing headlines,css and TOC fixes
nileshgulia1 Jun 16, 2023
4a062a5
fix: update jest snapshots
nileshgulia1 Jun 16, 2023
11192a5
Merge branch 'linked-headlines' into linkedHeadlinesRefactor
nileshgulia1 Jun 17, 2023
b787548
refactor: move useClipboard hook to volto/src/hooks
nileshgulia1 Jun 17, 2023
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
71 changes: 71 additions & 0 deletions cypress/tests/core/blocks/block-anchors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { slateBeforeEach } from '../../../support/volto-slate';

describe('Block Tests: Anchors', () => {
beforeEach(slateBeforeEach);

it('Add Block: Links', () => {
// Change page title
cy.clearSlateTitle();
cy.getSlateTitle().type('Slate Heading Anchors');
cy.getSlate().click();

// Add TOC block
cy.get('.ui.basic.icon.button.block-add-button').first().click();
cy.get(".blocks-chooser .ui.form .field.searchbox input[type='text']").type(
'table of contents',
);
cy.get('.button.toc').click();

// Save page
cy.get('#toolbar-save').click();
cy.url().should('eq', Cypress.config().baseUrl + '/my-page');
cy.get('h1.documentFirstHeading')
.trigger('mouseover', { eventConstructor: 'MouseEvent' })
.children()
.should('have.length', 1);
});

it('Add Block: add content to TOC', () => {
// Change page title
cy.clearSlateTitle();
cy.getSlateTitle().type('Slate Heading Anchors');
cy.getSlate().click();

// Add TOC block
cy.get('.ui.basic.icon.button.block-add-button').first().click();
cy.get(".blocks-chooser .ui.form .field.searchbox input[type='text']").type(
'table of contents',
);
cy.get('.button.toc').click();

// Add headings
cy.get('.ui.drag.block.inner.slate').click().type('Title 1').click();
cy.get('.ui.drag.block.inner.slate span span span').setSelection('Title 1');
cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
force: true,
});
cy.get('.ui.drag.block.inner.slate').click().type('{enter}');

cy.get('.ui.drag.block.inner.slate').eq(1).click().type('Title 2').click();
cy.get('.ui.drag.block.inner.slate span span span')
.eq(1)
.setSelection('Title 2');
cy.get('.slate-inline-toolbar .button-wrapper a[title="Title"]').click({
force: true,
});
cy.get('.ui.drag.block.inner.slate').eq(1).click().type('{enter}');

// Save page
cy.get('#toolbar-save').click();
cy.url().should('eq', Cypress.config().baseUrl + '/my-page');

// Check if the page contains the TOC and scrolls to each entry on click
cy.contains('Slate Heading Anchors');
cy.get('h2[id="title-1"]').contains('Title 1');
cy.get('h2[id="title-2"]').contains('Title 2');
cy.get('a[href="#title-1"]').click();
cy.get('h2[id="title-1"]').scrollIntoView().should('be.visible');
cy.get('a[href="#title-2"]').click();
cy.get('h2[id="title-2"]').scrollIntoView().should('be.visible');
});
});
4 changes: 2 additions & 2 deletions cypress/tests/core/guillotina/blocks-text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe('Text Block Tests', () => {

// then the page view should contain a link
cy.contains('Colorless green ideas sleep furiously.');
cy.get('#page-document a')
cy.get('#page-document p a')
.should('have.attr', 'href')
.and('include', 'https://google.com');
});
Expand Down Expand Up @@ -81,7 +81,7 @@ describe('Text Block Tests', () => {

// then the page view should contain a mailto link
cy.contains('Colorless green ideas sleep furiously.');
cy.get('#page-document a')
cy.get('#page-document p a')
.should('have.attr', 'href')
.and('include', 'mailto:hello@example.com');
});
Expand Down
4 changes: 2 additions & 2 deletions cypress/tests/core/volto-slate/05-block-slate-format-basics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ describe('Block Tests: Basic text format', () => {
cy.toolbarSave();

// then the page view should contain our changes
cy.get('[id="page-document"] h2').children().should('have.length', 0);
cy.get('[id="page-document"] h2').children().should('have.length', 1);
cy.get('[id="page-document"] h2').contains('Colorless');
});

Expand Down Expand Up @@ -177,7 +177,7 @@ describe('Block Tests: Basic text format', () => {
cy.toolbarSave();

// then the page view should contain our changes
cy.get('[id="page-document"] h3').children().should('have.length', 0);
cy.get('[id="page-document"] h3').children().should('have.length', 1);
cy.get('[id="page-document"] h3').contains('Colorless');
});

Expand Down
4 changes: 2 additions & 2 deletions cypress/tests/guillotina/blocks-text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe('Text Block Tests', () => {

// then the page view should contain a link
cy.contains('Colorless green ideas sleep furiously.');
cy.get('#page-document a')
cy.get('#page-document p a')
.should('have.attr', 'href')
.and('include', 'https://google.com');
});
Expand Down Expand Up @@ -81,7 +81,7 @@ describe('Text Block Tests', () => {

// then the page view should contain a mailto link
cy.contains('Colorless green ideas sleep furiously.');
cy.get('#page-document a')
cy.get('#page-document p a')
.should('have.attr', 'href')
.and('include', 'mailto:hello@example.com');
});
Expand Down
9 changes: 9 additions & 0 deletions docs/source/configuration/volto-slate/configuration-settings.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,15 @@ They are not persisted in the final value, so they are useful, for example, to h
slate.runtimeDecorators = [([node, path], ranges) => ranges];
```

(editor-configuration-slate-useLinkedHeadlines-label)=
nileshgulia1 marked this conversation as resolved.
Show resolved Hide resolved

## `slate.useLinkedHeadlines`

volto-slate comes with anchored headings for all tags(h1,h2,h3,h4) formatted via editor. You can easily opt-out by using the setting.
nileshgulia1 marked this conversation as resolved.
Show resolved Hide resolved

```js
slate.useLinkedHeadlines = false
```

(editor-configuration-blocks-initialBlocksFocus-label)=

Expand Down
5 changes: 5 additions & 0 deletions locales/ca/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3734,6 +3734,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/de/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3731,6 +3731,11 @@ msgstr "URL-Verwaltung"
msgid "URL Management for {title}"
msgstr "URL-Verwaltung für {title}"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/en/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3725,6 +3725,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/es/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3736,6 +3736,11 @@ msgstr "Gestión de URLs"
msgid "URL Management for {title}"
msgstr "Gestión de URLs para {title}"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/eu/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3732,6 +3732,11 @@ msgstr "URLen kudeaketa"
msgid "URL Management for {title}"
msgstr "{title} orrialdearen URLen kudeaketa"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/fi/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3736,6 +3736,11 @@ msgstr "URL-osoitteiden hallinta"
msgid "URL Management for {title}"
msgstr "URL-osoitteiden hallinta kohteelle {title}"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/fr/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3742,6 +3742,11 @@ msgstr "Gestion des URLs"
msgid "URL Management for {title}"
msgstr "Gestion de l'URL pour {title}"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/it/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3725,6 +3725,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/ja/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3733,6 +3733,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/nl/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3744,6 +3744,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/pt/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3733,6 +3733,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/pt_BR/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3735,6 +3735,11 @@ msgstr "Gerenciamento de URL"
msgid "URL Management for {title}"
msgstr "Gerenciamento de URL para {title}"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/ro/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3725,6 +3725,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/volto.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3727,6 +3727,11 @@ msgstr ""
msgid "URL Management for {title}"
msgstr ""

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
5 changes: 5 additions & 0 deletions locales/zh_CN/LC_MESSAGES/volto.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3731,6 +3731,11 @@ msgstr "URL管理"
msgid "URL Management for {title}"
msgstr "{title}的URL管理"

#: helpers/MessageLabels/MessageLabels
# defaultMessage: URL copied to clipboard
msgid "URL copied to clipboard"
msgstr ""

#: components/manage/Rules/Rules
# defaultMessage: Unassign
msgid "Unassign"
Expand Down
1 change: 1 addition & 0 deletions news/4287.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Slug based linked headlines in volto-slate: [tiberiuichim , nileshgulia1]
nileshgulia1 marked this conversation as resolved.
Show resolved Hide resolved
18 changes: 13 additions & 5 deletions packages/volto-slate/src/editor/less/slate.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,27 @@ h4 {
&:hover {
a.anchor {
svg {
visibility: unset;
opacity: 1;
transform: rotate(15deg);
}
}
}

.anchor-wrapper {
margin-left: 5px;
vertical-align: middle;
}

a.anchor {
davisagli marked this conversation as resolved.
Show resolved Hide resolved
display: contents;
margin-left: -1ch;
float: left;

svg {
width: 1ch;
visibility: hidden;
transform: rotate(45deg);
width: 1.6ch;
fill: #42526e;
opacity: 0;
transform: rotate(15deg) translate(-8px, 2px);
transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
}
}
}
Copy link
Member

@ksuess ksuess Mar 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer a link icon aligned and with same size of the headline or just slightly increased in size.

Cosmetics: the link icon is rotated. Even if the shape of the icon is unusual, it's a global design decission.

grafik

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ksuess it's relatively difficult to make the link icon properly wrap with the text, so if it's multiple lines, it doesn't behave well. But my css knowledge may be limited, maybe there's a hack to do it

Loading