15 | 16 | 37 | {% endset %} 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
22 |
23 |
--------------------------------------------------------------------------------
/src/translations/en/footnotes.php:
--------------------------------------------------------------------------------
1 | 'Enable anchor links',
5 | 'Enable duplicate footnotes' => 'Enable duplicate footnotes',
6 | 'Footnotes' => 'Footnotes',
7 | 'When disabled, identical footnote texts will share the same footnote number and the texts will be combined into a single footnote. When enabled, each footnote text will be listed seperately (with its own footnote number) regardless of any equality to other footnotes.' => 'When disabled, identical footnote texts will share the same footnote number and the texts will be combined into a single footnote. When enabled, each footnote text will be listed seperately (with its own footnote number) regardless of any equality to other footnotes.',
8 | 'When disabled, the superscript numbers substituting footnote texts will be just plain text. When enabled, those superscript numbers will be anchors linking to the corresponding footnotes (assumed the footnotes in the template are marked up as targets accordingly).' => 'When disabled, the superscript numbers substituting footnote texts will be just plain text. When enabled, those superscript numbers will be anchors linking to the corresponding footnotes (assumed the footnotes in the template are marked up as targets accordingly).',
9 | ];
--------------------------------------------------------------------------------
/src/translations/de/footnotes.php:
--------------------------------------------------------------------------------
1 | 'Sprungmarken aktivieren',
5 | 'Enable duplicate footnotes' => 'Doppelte Fußnoten aktivieren',
6 | 'Footnotes' => 'Footnotes',
7 | 'When disabled, identical footnote texts will share the same footnote number and the texts will be combined into a single footnote. When enabled, each footnote text will be listed seperately (with its own footnote number) regardless of any equality to other footnotes.' => 'Wenn deaktiviert, dann werden sich identische Fußnotentexte die selbe Fußnotennummer teilen und es wird nur eine Fußnote dafür geben. Wenn aktiviert, dann wird jeder Fußnotentext einzeln aufgelistet (jeweils mit eigener Fußnotennummer) und zwar unabhängig von etwaiger Gleichheit zu anderen Fußnoten.',
8 | 'When disabled, the superscript numbers substituting footnote texts will be just plain text. When enabled, those superscript numbers will be anchors linking to the corresponding footnotes (assumed the footnotes in the template are marked up as targets accordingly).' => 'Wenn deaktivert, dann werden die hochgestellten Zahlen, welche die Fußnotentexte ersetzen, einfache Texte sein. Wenn aktiviert, dann werden eben jene hochgestellten Zahlen Ankerlinks sein und zu den entsprechenden Fußnoten verlinken (vorausgesetzt die Fußnoten sind im Template entsprechend als Sprungmarken ausgewiesen).',
9 | ];
--------------------------------------------------------------------------------
/src/resources/ckeditor/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@verbb/ckeditor5-footnotes",
3 | "version": "0.0.1",
4 | "description": "A plugin for CKEditor 5.",
5 | "type": "module",
6 | "main": "src/index.js",
7 | "exports": {
8 | ".": "./src/index.js",
9 | "./dist/index.js": "./dist/index.js",
10 | "./*": "./dist/*",
11 | "./browser/*": null,
12 | "./build/*": "./build/*",
13 | "./src/*": "./src/*",
14 | "./package.json": "./package.json"
15 | },
16 | "license": "MIT",
17 | "files": [
18 | "dist",
19 | "lang",
20 | "src",
21 | "theme",
22 | "build",
23 | "ckeditor5-metadata.json"
24 | ],
25 | "devDependencies": {
26 | "@ckeditor/ckeditor5-dev-build-tools": "43.0.1",
27 | "@ckeditor/ckeditor5-inspector": ">=4.1.0",
28 | "@ckeditor/ckeditor5-package-tools": "^3.0.1",
29 | "ckeditor5": "latest",
30 | "http-server": "^14.1.0",
31 | "webdriverio": "^9.0.7"
32 | },
33 | "peerDependencies": {
34 | "ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
35 | },
36 | "scripts": {
37 | "build:dist": "node ./scripts/build-dist.mjs",
38 | "dll:build": "ckeditor5-package-tools dll:build",
39 | "dll:serve": "http-server ./ -o sample/dll.html",
40 | "dev": "ckeditor5-package-tools start",
41 | "build": "npm run dll:build && npm run build:dist"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
--------------------------------------------------------------------------------
/src/resources/redactor/footnotebutton.js:
--------------------------------------------------------------------------------
1 | (function ($R) {
2 | $R.add('plugin', 'footnotebutton', {
3 | translations: {
4 | en: {
5 | "footnote": 'Footnote',
6 | },
7 | de: {
8 | "footnote": 'Fußnote',
9 | }
10 | },
11 |
12 | init: function (app) {
13 | this.app = app;
14 | this.lang = app.lang;
15 | this.toolbar = app.toolbar;
16 | this.inline = app.inline;
17 | },
18 |
19 | start: function () {
20 | this.button = this.toolbar.addButton('footnotebutton', {
21 | title: this.lang.get('footnote'),
22 | api: 'plugin.footnotebutton.formatSup',
23 | icon: '',
24 | });
25 | },
26 |
27 | formatSup: function () {
28 | this.inline.format({ tag: 'sup', class: 'footnote', attr: { tabindex: '0' } });
29 | },
30 | });
31 | })(Redactor);
32 |
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "verbb/footnotes",
3 | "description": "Adds a footnotes feature to CKEditor fields and Twig templates.",
4 | "type": "craft-plugin",
5 | "version": "5.1.3",
6 | "keywords": [
7 | "craft",
8 | "cms",
9 | "craftcms",
10 | "craft-plugin",
11 | "redactor",
12 | "ckeditor",
13 | "footnotes"
14 | ],
15 | "support": {
16 | "email": "support@verbb.io",
17 | "issues": "https://github.com/verbb/footnotes/issues?state=open",
18 | "source": "https://github.com/verbb/footnotes",
19 | "docs": "https://github.com/verbb/footnotes",
20 | "rss": "https://github.com/verbb/footnotes/commits/v2.atom"
21 | },
22 | "license": "MIT",
23 | "authors": [
24 | {
25 | "name": "Verbb",
26 | "homepage": "https://verbb.io"
27 | },
28 | {
29 | "name": "Vierbeuter",
30 | "homepage": "https://www.vierbeuter.de"
31 | }
32 | ],
33 | "require": {
34 | "php": "^8.2",
35 | "craftcms/cms": "^5.0.0",
36 | "verbb/base": "^3.0.0"
37 | },
38 | "autoload": {
39 | "psr-4": {
40 | "verbb\\footnotes\\": "src/"
41 | }
42 | },
43 | "extra": {
44 | "name": "Footnotes",
45 | "handle": "footnotes",
46 | "changelogUrl": "https://raw.githubusercontent.com/verbb/footnotes/craft-5/CHANGELOG.md",
47 | "class": "verbb\\footnotes\\Footnotes"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/templates/settings.html:
--------------------------------------------------------------------------------
1 | {% extends 'footnotes/_layouts' %}
2 | {% import '_includes/forms' as forms %}
3 |
4 | {% requireAdmin %}
5 |
6 | {% set crumbs = [
7 | { label: 'Footnotes' | t('footnotes'), url: url('footnotes/settings') },
8 | { label: 'Settings' | t('app'), url: url('footnotes/settings') }
9 | ] %}
10 |
11 | {% set selectedTab = 'settings' %}
12 | {% set fullPageForm = true %}
13 |
14 | {% block blockContent %}
15 |
16 |
17 |
18 |
19 | {% namespace 'settings' %}
20 |
21 | {{ forms.lightswitchField({
22 | first: true,
23 | label: 'Enable anchor links' | t('footnotes'),
24 | instructions: 'When disabled, the superscript numbers substituting footnote texts will be just plain text. When enabled, those superscript numbers will be anchors linking to the corresponding footnotes (assumed the footnotes in the template are marked up as targets accordingly).' | t('footnotes'),
25 | name: 'enableAnchorLinks',
26 | on: settings.enableAnchorLinks,
27 | errors: settings.getErrors('enableAnchorLinks'),
28 | }) }}
29 |
30 | {{ forms.lightswitchField({
31 | label: 'Enable duplicate footnotes' | t('footnotes'),
32 | instructions: 'When disabled, identical footnote texts will share the same footnote number and the texts will be combined into a single footnote. When enabled, each footnote text will be listed seperately (with its own footnote number) regardless of any equality to other footnotes.' | t('footnotes'),
33 | name: 'enableDuplicateFootnotes',
34 | on: settings.enableDuplicateFootnotes,
35 | errors: settings.getErrors('enableDuplicateFootnotes'),
36 | }) }}
37 |
38 | {% endnamespace %}
39 |
40 | {% endblock %}
41 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.yaml:
--------------------------------------------------------------------------------
1 | name: Bug Report
2 | description: Create a report to help us improve.
3 | body:
4 | - type: markdown
5 | attributes:
6 | value: |
7 | Before you send through your bug report, please ensure you have taken these steps first:
8 |
9 | ✅ I‘ve searched open and closed issues.
10 |
11 | - type: textarea
12 | id: bug-description
13 | attributes:
14 | label: Describe the bug
15 | description: Describe the bug and what behaviour you expect if the bug is fixed.
16 | placeholder: "I have an issue where..."
17 | validations:
18 | required: true
19 | - type: textarea
20 | id: steps-to-reproduce
21 | attributes:
22 | label: Steps to reproduce
23 | description: Detail how we can reproduce this issue.
24 | value: |
25 | 1.
26 | 2.
27 | validations:
28 | required: true
29 | - type: input
30 | id: craft-version
31 | attributes:
32 | label: Craft CMS version
33 | description: What version of Craft CMS you‘re using. **Do not write "latest"**.
34 | validations:
35 | required: true
36 | - type: input
37 | id: plugin-version
38 | attributes:
39 | label: Plugin version
40 | description: What version of the plugin you‘re using. **Do not write "latest"**.
41 | validations:
42 | required: true
43 | - type: input
44 | id: multi-site
45 | attributes:
46 | label: Multi-site?
47 | description: Whether your install is a multi-site.
48 | placeholder: |
49 | "Yes" or "No"
50 | - type: textarea
51 | id: additional-context
52 | attributes:
53 | label: Additional context
54 | description: Provide any additional information you think might be useful. The more information you provide the easier it‘ll be for use to fix this bug!
55 | placeholder: |
56 | "I also have X plugin installed..." or "This only happens on production..."
--------------------------------------------------------------------------------
/src/twigextensions/Extension.php:
--------------------------------------------------------------------------------
1 | ['html']]),
29 | ];
30 | }
31 |
32 | /**
33 | * Returns a list of functions to add to the existing list.
34 | *
35 | * @return array An array of functions
36 | */
37 | public function getFunctions(): array
38 | {
39 | return [
40 | new TwigFunction('footnotes_exist', [$this, 'footnotesExist']),
41 | new TwigFunction('footnotes_set', [$this, 'setFootnotes']),
42 | new TwigFunction('footnotes', [$this, 'getFootnotes'], ['is_safe' => ['html']]),
43 | ];
44 | }
45 |
46 | /**
47 | * Filters the given string for footnotes and replaces them with a number.
48 | *
49 | * @param string|null $value
50 | * @param array $options
51 | * @return string
52 | */
53 | public function filterFootnotes(string $value = null, array $options = []): string
54 | {
55 | return Footnotes::$plugin->getService()->filter($value, $options);
56 | }
57 |
58 | /**
59 | * Checks if any footnotes exist.
60 | *
61 | * @return bool
62 | */
63 | public function footnotesExist(): bool
64 | {
65 | return Footnotes::$plugin->getService()->exist();
66 | }
67 |
68 | /**
69 | * Returns all footnotes.
70 | *
71 | * @return string[]
72 | */
73 | public function getFootnotes(array $options = []): array
74 | {
75 | return Footnotes::$plugin->getService()->get($options);
76 | }
77 |
78 | public function setFootnotes(array $footnotes = []): void
79 | {
80 | Footnotes::$plugin->getService()->set($footnotes);
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/docs/feature-tour/usage.md:
--------------------------------------------------------------------------------
1 | # Usage
2 | Once Footnotes has been installed, in the Craft CMS control panel, navigate to any CKEditor field in your Craft settings (Settings > Fields).
3 |
4 | For the **CKEditor Config** setting, either create a new config, or edit an existing one. You'll see a button with the Footnotes icon (an asterisk) as an available button to add to your toolbar. Drag and drop it to the appropriate position in your toolbar.
5 |
6 | ## Render your content
7 | When rendering the CKEditor field containing footnotes, you'll need to use the `footnotes` Twig filter.
8 |
9 | ```twig
10 | {{ entry.myContentField | footnotes }}
11 | ```
12 |
13 | ## Render footnotes
14 | Then, you'll likely want to render the footnotes at the bottom of the page, or neat your content. Using the Twig function `footnotes()` will return an array of footnotes (those that have been collected using the `footnotes` filter above). Each footnote is indexed by its `number`.
15 |
16 | ```twig
17 |
21 | This is a demo of the classic editor
22 | build that loads your plugin (Footnotes) generated by the tool. You can modify this
23 | sample and use it to validate whether a plugin or a set of plugins work fine.
24 |
26 | Footnotes inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
27 |
63 | The code snippet below presents the directory structure. 64 |
65 | 66 |.
67 | ├─ lang
68 | │ └─ contexts.json # Entries used for creating translations.
69 | ├─ sample
70 | │ ├─ dll.html # The editor initialized using the DLL builds. Check README for details.
71 | │ ├─ index.html # The currently displayed file.
72 | │ └─ ckeditor.js # The editor initialization script.
73 | ├─ src
74 | │ ├─ footnotes.ts
75 | │ ├─ index.js # The modules exported by the package when using the DLL builds.
76 | │ └─ **/*.js # All JavaScript source files should be saved here.
77 | ├─ tests
78 | │ ├─ footnotes.js
79 | │ ├─ index.js # Tests for the plugin.
80 | │ └─ **/*.js # All tests should be saved here.
81 | ├─ theme
82 | │ ├─ icons
83 | │ │ ├─ ckeditor.svg # The CKEditor 5 icon displayed in the toolbar.
84 | │ │ └─ **/*.svg # All icon files should be saved here.
85 | │ └─ **/*.css # All CSS files should be saved here.
86 | ├─ .editorconfig
87 | ├─ ...
88 | └─ README.mdIf you found a problem with CKEditor 5 or the package generator, please, report an issue:
92 |21 | This is a demo of the classic editor 22 | build, initialized using the DLL builds. 23 |
24 |
25 | Your plugin (Footnotes) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the sample/dll.html file.
26 |
If the editor is not initialized correctly and the browser console displays an error such as the following:
30 |Uncaught TypeError: Cannot read properties of undefined (reading 'Footnotes') at dll.html:85it means that the DLL build of the @verbb/ckeditor5-footnotes package has not been created.
Please call the npm run dll:build command in the CLI, and after it finishes, refresh the page.
The source of the DLL build is located in the src/index.js file. It may export as many things as the package offers.
Whenever you change objects exported by the DLL build, please review the content of the sample. Things to keep in mind:
39 |The primary purpose of the sample is to verify whether the plugins in the package will work together with CKEditor 5 created with the DLL approach.
46 | 47 |
49 | By default, the build/ directory is specified in the #files
50 | array in the package.json file. It means all its contents will be published when calling the npm publish command.
51 |
53 | Unfortunately, it is easy to forget to refresh the DLL build before making a new release. Hence, we created the prescript that would refresh the build automatically when calling the npm publish command.
54 |
If you found a problem with CKEditor 5 or the package generator, please, report an issue:
58 |