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

Jump to bottom

Added JS files formatting with Prettier #2573

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Added JS files formatting with Prettier #2573

wants to merge 8 commits into from

Conversation

mnocon
Copy link
Contributor

@mnocon mnocon commented Dec 9, 2024 •
edited
Loading

This is extracted from #2537 (suggested by @GrabowskiM )

Target: master, 4.6

Things done - I belive it might be best to review by commits:

  • added Prettier and ESLint config:646462f

While both configs are added, this PR focuses only on Prettier - we might introduce ESLint in the future, we will see

  • Run Prettier: 0a7d956
    Only autogenerated changes here

  • Removed obsolete files: 4f7291e

The references to these files were removed in https://github.com/ibexa/documentation-developer/pull/1529/files . They still mention ezplatform-richtext, so they're clearly outdated.

  • Added a step fixing the code samples by default, same way we have the code style fixed for PHP:
    f76c24f

  • Adjusted highlighting: 49267f3 (thanks to the "report changes to code samples job" 💪 )

  • Migrated from node-sass to sass: I had trouble installing the packages locally using node-sass as a dependency, the error looked like this:

~/Desktop/r/ibexa/documentation-developer add-prettier-eslint *1 ❯ yarn install                                                                   15:21:31
yarn install v1.22.22
[1/4] 🔍  Resolving packages...
warning [email protected]: Node Sass is no longer supported. Please use `sass` or `sass-embedded` instead.
warning node-sass > [email protected]: Glob versions prior to v9 are no longer supported
warning node-sass > node-gyp > [email protected]: Glob versions prior to v9 are no longer supported
warning node-sass > sass-graph > [email protected]: Glob versions prior to v9 are no longer supported
warning node-sass > gaze > globule > [email protected]: Glob versions prior to v9 are no longer supported
warning node-sass > node-gyp > [email protected]: This package is no longer supported.
warning node-sass > make-fetch-happen > cacache > [email protected]: Glob versions prior to v9 are no longer supported
warning node-sass > node-gyp > make-fetch-happen > cacache > [email protected]: Glob versions prior to v9 are no longer supported
warning node-sass > node-gyp > npmlog > [email protected]: This package is no longer supported.
warning node-sass > node-gyp > npmlog > [email protected]: This package is no longer supported.
warning node-sass > make-fetch-happen > cacache > @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
warning node-sass > node-gyp > make-fetch-happen > cacache > @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
error /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass
Output:
Binary found at /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/vendor/darwin-arm64-115/binding.node
Testing binary
Binary has a problem: Error: dlopen(/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/vendor/darwin-arm64-115/binding.node, 0x0001): tried: '/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/vendor/darwin-arm64-115/binding.node' (not a mach-o file), '/System/Volumes/Preboot/Cryptexes/OS/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/vendor/darwin-arm64-115/binding.node' (no such file), '/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/vendor/darwin-arm64-115/binding.node' (not a mach-o file)
    at Module._extensions..node (node:internal/modules/cjs/loader:1454:18)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at module.exports (/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/lib/binding.js:19:10)
    at Object.<anonymous> (/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/lib/index.js:13:35)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32) {
  code: 'ERR_DLOPEN_FAILED'
}
Building the binary locally
Building: /Users/marek/.nvm/versions/node/v20.14.0/bin/node /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/Users/marek/.nvm/versions/node/v20.14.0/bin/node',
gyp verb cli   '/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb find Python Python is not set from command line or npm configuration
gyp verb find Python Python is not set from environment variable PYTHON
gyp verb find Python checking if "python3" can be used
gyp verb find Python - executing "python3" to get executable path
gyp verb find Python - executable path is "/opt/homebrew/opt/[email protected]/bin/python3.13"
gyp verb find Python - executing "/opt/homebrew/opt/[email protected]/bin/python3.13" to get version
gyp verb find Python - version is "3.13.0"
gyp info find Python using Python version 3.13.0 found at "/opt/homebrew/opt/[email protected]/bin/python3.13"
gyp verb get node dir no --target version specified, falling back to host node version: 20.14.0
gyp verb command install [ '20.14.0' ]
gyp verb install input version string "20.14.0"
gyp verb install installing version: 20.14.0
gyp verb install --ensure was passed, so won't reinstall if already installed
gyp verb install version is already installed, need to check "installVersion"
gyp verb got "installVersion" 11
gyp verb needs "installVersion" 9
gyp verb install version is good
gyp verb get node dir target node version installed: 20.14.0
gyp verb build dir attempting to create "build" dir: /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/build
gyp verb build dir "build" dir needed to be created? Yes
gyp verb build/config.gypi creating config file
gyp verb build/config.gypi writing out config file: /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/build/config.gypi
gyp verb config.gypi checking for gypi file: /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/config.gypi
gyp verb common.gypi checking for gypi file: /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/common.gypi
gyp verb gyp gyp format was not specified; forcing "make"
gyp info spawn /opt/homebrew/opt/[email protected]/bin/python3.13
gyp info spawn args [
gyp info spawn args   '/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/marek/Library/Caches/node-gyp/20.14.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/marek/Library/Caches/node-gyp/20.14.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/marek/Library/Caches/node-gyp/20.14.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
Traceback (most recent call last):
  File "/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/gyp/gyp_main.py", line 42, in <module>
    import gyp  # noqa: E402
    ^^^^^^^^^^
  File "/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/gyp/pylib/gyp/__init__.py", line 9, in <module>
    import gyp.input
  File "/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/gyp/pylib/gyp/input.py", line 19, in <module>
    from distutils.version import StrictVersion
ModuleNotFoundError: No module named 'distutils'
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/lib/configure.js:259:16)
gyp ERR! stack     at ChildProcess.emit (node:events:519:28)
gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:294:12)
gyp ERR! System Darwin 23.6.0
gyp ERR! command "/Users/marek/.nvm/versions/node/v20.14.0/bin/node" "/Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/marek/Desktop/repos/ibexa/documentation-developer/node_modules/node-sass
gyp ERR! node -v v20.14.0
gyp ERR! node-gyp -v v8.4.1
gyp ERR! not ok 
Build failed with error code: 1
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Migration to sass seems to work - I've verified that yarn sass still works.

Open question: should we include the yarn.lock in the repository?

@mnocon mnocon marked this pull request as ready for review December 9, 2024 15:00
@mnocon mnocon requested a review from a team December 9, 2024 15:00
dew326
dew326 reviewed Dec 10, 2024
View reviewed changes
package.json Outdated
},
"prettier": "eslint-config-ibexa/prettier",
"devDependencies": {
"eslint-config-ibexa": "https://github.com/ibexa/eslint-config-ibexa.git#v1.0.0"
Copy link
Contributor

Choose a reason for hiding this comment

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

In 4.6 we use ~v1.1.1 and in 5.0 we have ~v1.2.0. I'm not sure if you want to have v1.0.0 here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will update, thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Bumped in faf80a2

@github-actions GitHub Actions
Copy link

code_samples/ change report

Before (on target branch)After (in current PR)

code_samples/back_office/image_editor/assets/random_dot/random-dot-stem.js

docs/content_management/images/extend_image_editor.md@18:``` js
docs/content_management/images/extend_image_editor.md@19:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot-stem.js') =]]
docs/content_management/images/extend_image_editor.md@20:```

001⫶import React, { useContext } from 'react';
002⫶import PropTypes from 'prop-types';
003⫶
004⫶const { ibexa } = window;
005⫶
006⫶const IDENTIFIER = 'dot';
007⫶
008⫶const Dot = () => {
009⫶    return (
010⫶        <div className="c-image-editor-dot">
011⫶            <button type="button" className="btn btn-secondary">
012⫶                Add dot
013⫶            </button>
014⫶        </div>
015⫶    );
016⫶};
017⫶
018⫶Dot.propTypes = {};
019⫶
020⫶Dot.defaultProps = {};
021⫶
022⫶export default Dot;
023⫶
024⫶ibexa.addConfig(
025⫶    'imageEditor.actions.dot', // The ID ("dot") must match the one from the configuration yaml file
026⫶    {
027⫶        label: 'Dot',
028⫶        component: Dot,
029⫶        icon: ibexa.helpers.icon.getIconPath('radio-button'), // Path to an icon that will be displayed in the UI
030⫶        identifier: IDENTIFIER, // The identifier must match the one from the configuration yaml file
031⫶    },

code_samples/back_office/image_editor/assets/random_dot/random-dot-stem.js

docs/content_management/images/extend_image_editor.md@18:``` js
docs/content_management/images/extend_image_editor.md@19:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot-stem.js') =]]
docs/content_management/images/extend_image_editor.md@20:```

001⫶import React, { useContext } from 'react';
002⫶import PropTypes from 'prop-types';
003⫶
004⫶const { ibexa } = window;
005⫶
006⫶const IDENTIFIER = 'dot';
007⫶
008⫶const Dot = () => {
009⫶    return (
010⫶        <div className="c-image-editor-dot">
011⫶            <button type="button" className="btn btn-secondary">
012⫶                Add dot
013⫶            </button>
014⫶        </div>
015⫶    );
016⫶};
017⫶
018⫶Dot.propTypes = {};
019⫶
020⫶Dot.defaultProps = {};
021⫶
022⫶export default Dot;
023⫶
024⫶ibexa.addConfig(
025⫶    'imageEditor.actions.dot', // The ID ("dot") must match the one from the configuration yaml file
026⫶    {
027⫶        label: 'Dot',
028⫶        component: Dot,
029⫶        icon: ibexa.helpers.icon.getIconPath('radio-button'), // Path to an icon that will be displayed in the UI
030⫶        identifier: IDENTIFIER, // The identifier must match the one from the configuration yaml file
031⫶    },
032⫶    true
032⫶    true,
033⫶);


code_samples/back_office/image_editor/assets/random_dot/random-dot.js

docs/content_management/images/extend_image_editor.md@67:``` js
docs/content_management/images/extend_image_editor.md@68:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 26, 43) =]]
docs/content_management/images/extend_image_editor.md@69:```

001⫶    const drawDot = () => {
002⫶        const ctx = canvas.current.getContext('2d');
003⫶        const positionX = Math.random() * canvas.current.width;
004⫶        const positionY = Math.random() * canvas.current.height;
005⫶
006⫶        ctx.save();
007⫶
008⫶        ctx.fillStyle = '#ae1164';
009⫶
010⫶        ctx.beginPath();
011⫶        ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true);
012⫶        ctx.fill();
013⫶
014⫶        ctx.restore();
015⫶
016⫶        saveInHistory();
017⫶    };

docs/content_management/images/extend_image_editor.md@75:``` js
docs/content_management/images/extend_image_editor.md@76:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 17, 26) =]]
docs/content_management/images/extend_image_editor.md@77:```

001⫶    const saveInHistory = () => {
002⫶        const newImage = new Image();
003⫶
004⫶        newImage.onload = () => {
005⫶            dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData });
006⫶        };
007⫶
008⫶        newImage.src = canvas.current.toDataURL();
009⫶    };

docs/content_management/images/extend_image_editor.md@81:``` js
docs/content_management/images/extend_image_editor.md@82:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js') =]]
docs/content_management/images/extend_image_editor.md@83:```

001⫶import React, { useContext } from 'react';
002⫶import PropTypes from 'prop-types';
003⫶
004⫶import {
005⫶    CanvasContext,
006⫶    ImageHistoryContext,
007⫶    AdditionalDataContext,
008⫶} from '../../vendor/ibexa/image-editor/src/bundle/ui-dev/src/modules/image-editor/image.editor.modules';
009⫶
010⫶const { ibexa } = window;
011⫶
012⫶const IDENTIFIER = 'dot';
013⫶
014⫶const Dot = () => {
015⫶    const [canvas, setCanvas] = useContext(CanvasContext);
016⫶    const [imageHistory, dispatchImageHistoryAction] = useContext(ImageHistoryContext);
017⫶    const [additionalData, setAdditionalData] = useContext(AdditionalDataContext);
018⫶    const saveInHistory = () => {
019⫶        const newImage = new Image();
020⫶
021⫶        newImage.onload = () => {
022⫶            dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData });
023⫶        };
024⫶
025⫶        newImage.src = canvas.current.toDataURL();
026⫶    };
027⫶    const drawDot = () => {
028⫶        const ctx = canvas.current.getContext('2d');
029⫶        const positionX = Math.random() * canvas.current.width;
030⫶        const positionY = Math.random() * canvas.current.height;
031⫶
032⫶        ctx.save();
033⫶
034⫶        ctx.fillStyle = '#ae1164';
035⫶
036⫶        ctx.beginPath();
037⫶        ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true);
038⫶        ctx.fill();
039⫶
040⫶        ctx.restore();
041⫶
042⫶        saveInHistory();
043⫶    };
044⫶
045⫶    return (
046⫶        <div className="c-image-editor-dot">
047⫶            <button type="button" onClick={drawDot} className="btn btn-secondary">
048⫶                Add dot
049⫶            </button>
050⫶        </div>
051⫶    );
052⫶};
053⫶
054⫶Dot.propTypes = {};
055⫶
056⫶Dot.defaultProps = {};
057⫶
058⫶export default Dot;
059⫶
060⫶ibexa.addConfig(
061⫶    'imageEditor.actions.dot',
062⫶    {
063⫶        label: 'Dot',
064⫶        component: Dot,
065⫶        icon: ibexa.helpers.icon.getIconPath('radio-button'),
066⫶        identifier: IDENTIFIER,
067⫶    },
033⫶);


code_samples/back_office/image_editor/assets/random_dot/random-dot.js

docs/content_management/images/extend_image_editor.md@67:``` js
docs/content_management/images/extend_image_editor.md@68:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 26, 43) =]]
docs/content_management/images/extend_image_editor.md@69:```

001⫶    const drawDot = () => {
002⫶        const ctx = canvas.current.getContext('2d');
003⫶        const positionX = Math.random() * canvas.current.width;
004⫶        const positionY = Math.random() * canvas.current.height;
005⫶
006⫶        ctx.save();
007⫶
008⫶        ctx.fillStyle = '#ae1164';
009⫶
010⫶        ctx.beginPath();
011⫶        ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true);
012⫶        ctx.fill();
013⫶
014⫶        ctx.restore();
015⫶
016⫶        saveInHistory();
017⫶    };

docs/content_management/images/extend_image_editor.md@75:``` js
docs/content_management/images/extend_image_editor.md@76:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js', 17, 26) =]]
docs/content_management/images/extend_image_editor.md@77:```

001⫶    const saveInHistory = () => {
002⫶        const newImage = new Image();
003⫶
004⫶        newImage.onload = () => {
005⫶            dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData });
006⫶        };
007⫶
008⫶        newImage.src = canvas.current.toDataURL();
009⫶    };

docs/content_management/images/extend_image_editor.md@81:``` js
docs/content_management/images/extend_image_editor.md@82:[[= include_file('code_samples/back_office/image_editor/assets/random_dot/random-dot.js') =]]
docs/content_management/images/extend_image_editor.md@83:```

001⫶import React, { useContext } from 'react';
002⫶import PropTypes from 'prop-types';
003⫶
004⫶import {
005⫶    CanvasContext,
006⫶    ImageHistoryContext,
007⫶    AdditionalDataContext,
008⫶} from '../../vendor/ibexa/image-editor/src/bundle/ui-dev/src/modules/image-editor/image.editor.modules';
009⫶
010⫶const { ibexa } = window;
011⫶
012⫶const IDENTIFIER = 'dot';
013⫶
014⫶const Dot = () => {
015⫶    const [canvas, setCanvas] = useContext(CanvasContext);
016⫶    const [imageHistory, dispatchImageHistoryAction] = useContext(ImageHistoryContext);
017⫶    const [additionalData, setAdditionalData] = useContext(AdditionalDataContext);
018⫶    const saveInHistory = () => {
019⫶        const newImage = new Image();
020⫶
021⫶        newImage.onload = () => {
022⫶            dispatchImageHistoryAction({ type: 'ADD_TO_HISTORY', image: newImage, additionalData });
023⫶        };
024⫶
025⫶        newImage.src = canvas.current.toDataURL();
026⫶    };
027⫶    const drawDot = () => {
028⫶        const ctx = canvas.current.getContext('2d');
029⫶        const positionX = Math.random() * canvas.current.width;
030⫶        const positionY = Math.random() * canvas.current.height;
031⫶
032⫶        ctx.save();
033⫶
034⫶        ctx.fillStyle = '#ae1164';
035⫶
036⫶        ctx.beginPath();
037⫶        ctx.arc(positionX, positionY, 20, 0, Math.PI * 2, true);
038⫶        ctx.fill();
039⫶
040⫶        ctx.restore();
041⫶
042⫶        saveInHistory();
043⫶    };
044⫶
045⫶    return (
046⫶        <div className="c-image-editor-dot">
047⫶            <button type="button" onClick={drawDot} className="btn btn-secondary">
048⫶                Add dot
049⫶            </button>
050⫶        </div>
051⫶    );
052⫶};
053⫶
054⫶Dot.propTypes = {};
055⫶
056⫶Dot.defaultProps = {};
057⫶
058⫶export default Dot;
059⫶
060⫶ibexa.addConfig(
061⫶    'imageEditor.actions.dot',
062⫶    {
063⫶        label: 'Dot',
064⫶        component: Dot,
065⫶        icon: ibexa.helpers.icon.getIconPath('radio-button'),
066⫶        identifier: IDENTIFIER,
067⫶    },
068⫶    true
068⫶    true,
069⫶);


code_samples/back_office/online_editor/assets/js/online_editor/buttons/date.js


code_samples/back_office/online_editor/assets/js/online_editor/buttons/hr.js


code_samples/back_office/online_editor/assets/js/online_editor/plugins/date.js


code_samples/back_office/search/append_to_webpack.config.js

docs/administration/back_office/customize_search_suggestion.md@120:``` javascript
docs/administration/back_office/customize_search_suggestion.md@121://…
docs/administration/back_office/customize_search_suggestion.md@122:[[= include_file('code_samples/back_office/search/append_to_webpack.config.js') =]]
docs/administration/back_office/customize_search_suggestion.md@123:```

001⫶//…
069⫶);


code_samples/back_office/online_editor/assets/js/online_editor/buttons/date.js


code_samples/back_office/online_editor/assets/js/online_editor/buttons/hr.js


code_samples/back_office/online_editor/assets/js/online_editor/plugins/date.js


code_samples/back_office/search/append_to_webpack.config.js

docs/administration/back_office/customize_search_suggestion.md@120:``` javascript
docs/administration/back_office/customize_search_suggestion.md@121://…
docs/administration/back_office/customize_search_suggestion.md@122:[[= include_file('code_samples/back_office/search/append_to_webpack.config.js') =]]
docs/administration/back_office/customize_search_suggestion.md@123:```

001⫶//…
002⫶
003⫶const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');
004⫶
005⫶ibexaConfigManager.add({
006⫶    ibexaConfig,
007⫶    entryName: 'ibexa-admin-ui-layout-js',
008⫶    newItems: [ path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js'), ],
009⫶});
002⫶const ibexaConfigManager = require('./ibexa.webpack.config.manager.js');
003⫶
004⫶ibexaConfigManager.add({
005⫶    ibexaConfig,
006⫶    entryName: 'ibexa-admin-ui-layout-js',
007⫶    newItems: [path.resolve(__dirname, './assets/js/admin.search.autocomplete.product.js')],
008⫶});


code_samples/back_office/search/assets/js/admin.search.autocomplete.product.js



code_samples/back_office/search/assets/js/admin.search.autocomplete.product.js

docs/administration/back_office/customize_search_suggestion.md@113:``` js hl_lines="8"
docs/administration/back_office/customize_search_suggestion.md@113:``` js hl_lines="9"
docs/administration/back_office/customize_search_suggestion.md@114:[[= include_file('code_samples/back_office/search/assets/js/admin.search.autocomplete.product.js') =]]
docs/administration/back_office/customize_search_suggestion.md@115:```

001⫶(function (global, doc, ibexa, Routing) {
002⫶    const renderItem = (result, searchText) => {
003⫶        const globalSearch = doc.querySelector('.ibexa-global-search');
docs/administration/back_office/customize_search_suggestion.md@114:[[= include_file('code_samples/back_office/search/assets/js/admin.search.autocomplete.product.js') =]]
docs/administration/back_office/customize_search_suggestion.md@115:```

001⫶(function (global, doc, ibexa, Routing) {
002⫶    const renderItem = (result, searchText) => {
003⫶        const globalSearch = doc.querySelector('.ibexa-global-search');
004⫶        const {highlightText} = ibexa.helpers.highlight;
005⫶        const autocompleteHighlightTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-list').dataset.templateHighlight;
006⫶        const {getContentTypeIconUrl, getContentTypeName} = ibexa.helpers.contentType;
007⫶
008⫸        const autocompleteItemTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-product-template').dataset.templateItem;
009⫶
010⫶        return autocompleteItemTemplate
011⫶            .replace('{{ productHref }}', Routing.generate('ibexa.product_catalog.product.view', {productCode: result.productCode}))
012⫶            .replace('{{ productName }}', highlightText(searchText, result.name, autocompleteHighlightTemplate))
013⫶            .replace('{{ productCode }}', result.productCode)
014⫶            .replace('{{ productTypeIconHref }}', getContentTypeIconUrl(result.productTypeIdentifier))
015⫶            .replace('{{ productTypeName }}', result.productTypeName);
016⫶    };
017⫶
018⫶    ibexa.addConfig('autocomplete.renderers.product', renderItem, true);
019⫶})(window, document, window.ibexa, window.Routing);
004⫶        const { highlightText } = ibexa.helpers.highlight;
005⫶        const autocompleteHighlightTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-list').dataset
006⫶            .templateHighlight;
007⫶        const { getContentTypeIconUrl, getContentTypeName } = ibexa.helpers.contentType;
008⫶
009⫸        const autocompleteItemTemplate = globalSearch.querySelector('.ibexa-global-search__autocomplete-product-template').dataset
010⫶            .templateItem;
011⫶
012⫶        return autocompleteItemTemplate
013⫶            .replace('{{ productHref }}', Routing.generate('ibexa.product_catalog.product.view', { productCode: result.productCode }))
014⫶            .replace('{{ productName }}', highlightText(searchText, result.name, autocompleteHighlightTemplate))
015⫶            .replace('{{ productCode }}', result.productCode)
016⫶            .replace('{{ productTypeIconHref }}', getContentTypeIconUrl(result.productTypeIdentifier))
017⫶            .replace('{{ productTypeName }}', result.productTypeName);
018⫶    };
019⫶
020⫶    ibexa.addConfig('autocomplete.renderers.product', renderItem, true);
021⫶})(window, document, window.ibexa, window.Routing);


code_samples/back_office/udw/assets/js/image-tab/components/image.js

docs/administration/back_office/browser/add_browser_tab.md@90:```js
docs/administration/back_office/browser/add_browser_tab.md@91:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/components/image.js') =]]
docs/administration/back_office/browser/add_browser_tab.md@92:```

001⫶import React, { useState, useEffect, useContext } from 'react';
002⫶import { loadImageContent } from '../services/images.service';
003⫶import {
004⫶    MarkedLocationIdContext,
005⫶    LoadedLocationsMapContext,
006⫶    MultipleConfigContext,
007⫶    SelectedLocationsContext,
008⫶} from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module';
009⫶const Image = ({ restInfo, location }) => {
010⫶    const [content, setContent] = useState(null);
011⫶    const [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext);
012⫶    const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
013⫶    const [selectedLocations, dispatchSelectedLocationsAction] = useContext(SelectedLocationsContext);
014⫶    const [multiple] = useContext(MultipleConfigContext);
015⫶    const updateVersionInfoState = (response) => {


code_samples/back_office/udw/assets/js/image-tab/components/image.js

docs/administration/back_office/browser/add_browser_tab.md@90:```js
docs/administration/back_office/browser/add_browser_tab.md@91:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/components/image.js') =]]
docs/administration/back_office/browser/add_browser_tab.md@92:```

001⫶import React, { useState, useEffect, useContext } from 'react';
002⫶import { loadImageContent } from '../services/images.service';
003⫶import {
004⫶    MarkedLocationIdContext,
005⫶    LoadedLocationsMapContext,
006⫶    MultipleConfigContext,
007⫶    SelectedLocationsContext,
008⫶} from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module';
009⫶const Image = ({ restInfo, location }) => {
010⫶    const [content, setContent] = useState(null);
011⫶    const [markedLocationId, setMarkedLocationId] = useContext(MarkedLocationIdContext);
012⫶    const [loadedLocationsMap, dispatchLoadedLocationsAction] = useContext(LoadedLocationsMapContext);
013⫶    const [selectedLocations, dispatchSelectedLocationsAction] = useContext(SelectedLocationsContext);
014⫶    const [multiple] = useContext(MultipleConfigContext);
015⫶    const updateVersionInfoState = (response) => {
016⫶
017⫶        setContent(response.View.Result.searchHits.searchHit[0].value.Content);
018⫶    };
019⫶    const markLocation = ({ nativeEvent }) => {
020⫶        const isMarkedLocationClicked = location.id === markedLocationId;
021⫶
022⫶        if (isMarkedLocationClicked) {
023⫶            return;
024⫶        }
025⫶
026⫶        setMarkedLocationId(location.id);
027⫶        dispatchLoadedLocationsAction({ type: 'CUT_LOCATIONS', locationId: location.id });
028⫶        dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
029⫶
030⫶        if (!multiple) {
031⫶            dispatchSelectedLocationsAction({ type: 'CLEAR_SELECTED_LOCATIONS' });
032⫶                dispatchSelectedLocationsAction({ type: 'ADD_SELECTED_LOCATION', location });
033⫶        }
034⫶    };
035⫶    let src =
036⫶
037⫶        'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K';
038⫶    let alt = 'Loading meta data ...';
039⫶
040⫶    useEffect(() => {
041⫶        loadImageContent({ ...restInfo, contentId: location.ContentInfo.Content._id }, updateVersionInfoState);
042⫶    }, []);
043⫶
044⫶    if (content) {
045⫶        const imageField = content.CurrentVersion.Version.Fields.field.find((field) => field.fieldTypeIdentifier === 'ezimage').fieldValue;
046⫶
047⫶        src = imageField.uri;
048⫶        alt = imageField.fileName;
049⫶    }
050⫶
051⫶    return (
052⫶        <div className="c-image" data-title={alt} onClick={markLocation}>
053⫶            <img className="c-image__thumb" src={src} alt={alt} />
054⫶        </div>
055⫶    );
056⫶};
057⫶
058⫶export default Image;
016⫶        setContent(response.View.Result.searchHits.searchHit[0].value.Content);
017⫶    };
018⫶    const markLocation = ({ nativeEvent }) => {
019⫶        const isMarkedLocationClicked = location.id === markedLocationId;
020⫶
021⫶        if (isMarkedLocationClicked) {
022⫶            return;
023⫶        }
024⫶
025⫶        setMarkedLocationId(location.id);
026⫶        dispatchLoadedLocationsAction({ type: 'CUT_LOCATIONS', locationId: location.id });
027⫶        dispatchLoadedLocationsAction({ type: 'UPDATE_LOCATIONS', data: { parentLocationId: location.id, subitems: [] } });
028⫶
029⫶        if (!multiple) {
030⫶            dispatchSelectedLocationsAction({ type: 'CLEAR_SELECTED_LOCATIONS' });
031⫶            dispatchSelectedLocationsAction({ type: 'ADD_SELECTED_LOCATION', location });
032⫶        }
033⫶    };
034⫶    let src =
035⫶        'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCA0MCA0MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEuNDE0MjE7IiB4PSIwcHgiIHk9IjBweCI+CiAgICA8ZGVmcz4KICAgICAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICAgICAgICBALXdlYmtpdC1rZXlmcmFtZXMgc3BpbiB7CiAgICAgICAgICAgICAgZnJvbSB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIC13ZWJraXQtdHJhbnNmb3JtOiByb3RhdGUoLTM1OWRlZykKICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgICAgQGtleWZyYW1lcyBzcGluIHsKICAgICAgICAgICAgICBmcm9tIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIHRvIHsKICAgICAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zNTlkZWcpCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICAgIHN2ZyB7CiAgICAgICAgICAgICAgICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7CiAgICAgICAgICAgICAgICAtd2Via2l0LWFuaW1hdGlvbjogc3BpbiAxLjVzIGxpbmVhciBpbmZpbml0ZTsKICAgICAgICAgICAgICAgIC13ZWJraXQtYmFja2ZhY2UtdmlzaWJpbGl0eTogaGlkZGVuOwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzcGluIDEuNXMgbGluZWFyIGluZmluaXRlOwogICAgICAgICAgICB9CiAgICAgICAgXV0+PC9zdHlsZT4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJvdXRlciI+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwwQzIyLjIwNTgsMCAyMy45OTM5LDEuNzg4MTMgMjMuOTkzOSwzLjk5MzlDMjMuOTkzOSw2LjE5OTY4IDIyLjIwNTgsNy45ODc4MSAyMCw3Ljk4NzgxQzE3Ljc5NDIsNy45ODc4MSAxNi4wMDYxLDYuMTk5NjggMTYuMDA2MSwzLjk5MzlDMTYuMDA2MSwxLjc4ODEzIDE3Ljc5NDIsMCAyMCwwWiIgc3R5bGU9ImZpbGw6YmxhY2s7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNNS44NTc4Niw1Ljg1Nzg2QzcuNDE3NTgsNC4yOTgxNSA5Ljk0NjM4LDQuMjk4MTUgMTEuNTA2MSw1Ljg1Nzg2QzEzLjA2NTgsNy40MTc1OCAxMy4wNjU4LDkuOTQ2MzggMTEuNTA2MSwxMS41MDYxQzkuOTQ2MzgsMTMuMDY1OCA3LjQxNzU4LDEzLjA2NTggNS44NTc4NiwxMS41MDYxQzQuMjk4MTUsOS45NDYzOCA0LjI5ODE1LDcuNDE3NTggNS44NTc4Niw1Ljg1Nzg2WiIgc3R5bGU9ImZpbGw6cmdiKDIxMCwyMTAsMjEwKTsiLz4KICAgICAgICA8L2c+CiAgICAgICAgPGc+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMCwzMi4wMTIyQzIyLjIwNTgsMzIuMDEyMiAyMy45OTM5LDMzLjgwMDMgMjMuOTkzOSwzNi4wMDYxQzIzLjk5MzksMzguMjExOSAyMi4yMDU4LDQwIDIwLDQwQzE3Ljc5NDIsNDAgMTYuMDA2MSwzOC4yMTE5IDE2LjAwNjEsMzYuMDA2MUMxNi4wMDYxLDMzLjgwMDMgMTcuNzk0MiwzMi4wMTIyIDIwLDMyLjAxMjJaIiBzdHlsZT0iZmlsbDpyZ2IoMTMwLDEzMCwxMzApOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksMjguNDkzOUMzMC4wNTM2LDI2LjkzNDIgMzIuNTgyNCwyNi45MzQyIDM0LjE0MjEsMjguNDkzOUMzNS43MDE5LDMwLjA1MzYgMzUuNzAxOSwzMi41ODI0IDM0LjE0MjEsMzQuMTQyMUMzMi41ODI0LDM1LjcwMTkgMzAuMDUzNiwzNS43MDE5IDI4LjQ5MzksMzQuMTQyMUMyNi45MzQyLDMyLjU4MjQgMjYuOTM0MiwzMC4wNTM2IDI4LjQ5MzksMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxMDEsMTAxLDEwMSk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMy45OTM5LDE2LjAwNjFDNi4xOTk2OCwxNi4wMDYxIDcuOTg3ODEsMTcuNzk0MiA3Ljk4NzgxLDIwQzcuOTg3ODEsMjIuMjA1OCA2LjE5OTY4LDIzLjk5MzkgMy45OTM5LDIzLjk5MzlDMS43ODgxMywyMy45OTM5IDAsMjIuMjA1OCAwLDIwQzAsMTcuNzk0MiAxLjc4ODEzLDE2LjAwNjEgMy45OTM5LDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoMTg3LDE4NywxODcpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTUuODU3ODYsMjguNDkzOUM3LjQxNzU4LDI2LjkzNDIgOS45NDYzOCwyNi45MzQyIDExLjUwNjEsMjguNDkzOUMxMy4wNjU4LDMwLjA1MzYgMTMuMDY1OCwzMi41ODI0IDExLjUwNjEsMzQuMTQyMUM5Ljk0NjM4LDM1LjcwMTkgNy40MTc1OCwzNS43MDE5IDUuODU3ODYsMzQuMTQyMUM0LjI5ODE1LDMyLjU4MjQgNC4yOTgxNSwzMC4wNTM2IDUuODU3ODYsMjguNDkzOVoiIHN0eWxlPSJmaWxsOnJnYigxNjQsMTY0LDE2NCk7Ii8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8cGF0aCBkPSJNMzYuMDA2MSwxNi4wMDYxQzM4LjIxMTksMTYuMDA2MSA0MCwxNy43OTQyIDQwLDIwQzQwLDIyLjIwNTggMzguMjExOSwyMy45OTM5IDM2LjAwNjEsMjMuOTkzOUMzMy44MDAzLDIzLjk5MzkgMzIuMDEyMiwyMi4yMDU4IDMyLjAxMjIsMjBDMzIuMDEyMiwxNy43OTQyIDMzLjgwMDMsMTYuMDA2MSAzNi4wMDYxLDE2LjAwNjFaIiBzdHlsZT0iZmlsbDpyZ2IoNzQsNzQsNzQpOyIvPgogICAgICAgIDwvZz4KICAgICAgICA8Zz4KICAgICAgICAgICAgPHBhdGggZD0iTTI4LjQ5MzksNS44NTc4NkMzMC4wNTM2LDQuMjk4MTUgMzIuNTgyNCw0LjI5ODE1IDM0LjE0MjEsNS44NTc4NkMzNS43MDE5LDcuNDE3NTggMzUuNzAxOSw5Ljk0NjM4IDM0LjE0MjEsMTEuNTA2MUMzMi41ODI0LDEzLjA2NTggMzAuMDUzNiwxMy4wNjU4IDI4LjQ5MzksMTEuNTA2MUMyNi45MzQyLDkuOTQ2MzggMjYuOTM0Miw3LjQxNzU4IDI4LjQ5MzksNS44NTc4NloiIHN0eWxlPSJmaWxsOnJnYig1MCw1MCw1MCk7Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K';
036⫶    let alt = 'Loading meta data ...';
037⫶
038⫶    useEffect(() => {
039⫶        loadImageContent({ ...restInfo, contentId: location.ContentInfo.Content._id }, updateVersionInfoState);
040⫶    }, []);
041⫶
042⫶    if (content) {
043⫶        const imageField = content.CurrentVersion.Version.Fields.field.find((field) => field.fieldTypeIdentifier === 'ezimage').fieldValue;
044⫶
045⫶        src = imageField.uri;
046⫶        alt = imageField.fileName;
047⫶    }
048⫶
049⫶    return (
050⫶        <div className="c-image" data-title={alt} onClick={markLocation}>
051⫶            <img className="c-image__thumb" src={src} alt={alt} />
052⫶        </div>
053⫶    );
054⫶};
055⫶
056⫶export default Image;


code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js

docs/administration/back_office/browser/add_browser_tab.md@18:``` js
docs/administration/back_office/browser/add_browser_tab.md@19:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 0, 14) =]]
docs/administration/back_office/browser/add_browser_tab.md@20:```

001⫶import React, { useContext } from 'react';
002⫶
003⫶import Tab from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/components/tab/tab';
004⫶import ImagesList from './components/images.list';
005⫶
006⫶const ImageTabModule = () => {
007⫶    return (
008⫶        <div className="m-image-tab">
009⫶            <Tab isContentOnTheFlyDisabled={true} isSortSwitcherDisabled={true} isViewSwitcherDisabled={true}>
010⫶                <ImagesList />
011⫶            </Tab>
012⫶        </div>
013⫶    );
014⫶};

docs/administration/back_office/browser/add_browser_tab.md@32:```js
docs/administration/back_office/browser/add_browser_tab.md@33:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 14, 29) =]]
docs/administration/back_office/browser/add_browser_tab.md@34:```

001⫶ibexa.addConfig(
002⫶    'adminUiConfig.universalDiscoveryWidget.tabs',
003⫶    [
004⫶        {
005⫶            id: 'image',
006⫶            component: ImageTabModule,
007⫶            label: 'Image',
008⫶            icon: '/bundles/ibexaadminui/img/ibexa-icons.svg#image',
009⫶        },
010⫶    ],


code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js

docs/administration/back_office/browser/add_browser_tab.md@18:``` js
docs/administration/back_office/browser/add_browser_tab.md@19:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 0, 14) =]]
docs/administration/back_office/browser/add_browser_tab.md@20:```

001⫶import React, { useContext } from 'react';
002⫶
003⫶import Tab from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/components/tab/tab';
004⫶import ImagesList from './components/images.list';
005⫶
006⫶const ImageTabModule = () => {
007⫶    return (
008⫶        <div className="m-image-tab">
009⫶            <Tab isContentOnTheFlyDisabled={true} isSortSwitcherDisabled={true} isViewSwitcherDisabled={true}>
010⫶                <ImagesList />
011⫶            </Tab>
012⫶        </div>
013⫶    );
014⫶};

docs/administration/back_office/browser/add_browser_tab.md@32:```js
docs/administration/back_office/browser/add_browser_tab.md@33:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js', 14, 29) =]]
docs/administration/back_office/browser/add_browser_tab.md@34:```

001⫶ibexa.addConfig(
002⫶    'adminUiConfig.universalDiscoveryWidget.tabs',
003⫶    [
004⫶        {
005⫶            id: 'image',
006⫶            component: ImageTabModule,
007⫶            label: 'Image',
008⫶            icon: '/bundles/ibexaadminui/img/ibexa-icons.svg#image',
009⫶        },
010⫶    ],
011⫶    true
011⫶    true,
012⫶);
013⫶
014⫶export default ImageTabModule;

docs/administration/back_office/browser/add_browser_tab.md@40:```js
docs/administration/back_office/browser/add_browser_tab.md@41:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js') =]]
docs/administration/back_office/browser/add_browser_tab.md@42:```

001⫶import React, { useContext } from 'react';
002⫶
003⫶import Tab from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/components/tab/tab';
004⫶import ImagesList from './components/images.list';
005⫶
006⫶const ImageTabModule = () => {
007⫶    return (
008⫶        <div className="m-image-tab">
009⫶            <Tab isContentOnTheFlyDisabled={true} isSortSwitcherDisabled={true} isViewSwitcherDisabled={true}>
010⫶                <ImagesList />
011⫶            </Tab>
012⫶        </div>
013⫶    );
014⫶};
015⫶ibexa.addConfig(
016⫶    'adminUiConfig.universalDiscoveryWidget.tabs',
017⫶    [
018⫶        {
019⫶            id: 'image',
020⫶            component: ImageTabModule,
021⫶            label: 'Image',
022⫶            icon: '/bundles/ibexaadminui/img/ibexa-icons.svg#image',
023⫶        },
024⫶    ],
012⫶);
013⫶
014⫶export default ImageTabModule;

docs/administration/back_office/browser/add_browser_tab.md@40:```js
docs/administration/back_office/browser/add_browser_tab.md@41:[[= include_file('code_samples/back_office/udw/assets/js/image-tab/image.tab.module.js') =]]
docs/administration/back_office/browser/add_browser_tab.md@42:```

001⫶import React, { useContext } from 'react';
002⫶
003⫶import Tab from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/universal-discovery/components/tab/tab';
004⫶import ImagesList from './components/images.list';
005⫶
006⫶const ImageTabModule = () => {
007⫶    return (
008⫶        <div className="m-image-tab">
009⫶            <Tab isContentOnTheFlyDisabled={true} isSortSwitcherDisabled={true} isViewSwitcherDisabled={true}>
010⫶                <ImagesList />
011⫶            </Tab>
012⫶        </div>
013⫶    );
014⫶};
015⫶ibexa.addConfig(
016⫶    'adminUiConfig.universalDiscoveryWidget.tabs',
017⫶    [
018⫶        {
019⫶            id: 'image',
020⫶            component: ImageTabModule,
021⫶            label: 'Image',
022⫶            icon: '/bundles/ibexaadminui/img/ibexa-icons.svg#image',
023⫶        },
024⫶    ],
025⫶    true
025⫶    true,
026⫶);
027⫶
028⫶export default ImageTabModule;


code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js

docs/content_management/forms/create_form_attribute.md@69:``` js
docs/content_management/forms/create_form_attribute.md@70:[[= include_file('code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js') =]]
docs/content_management/forms/create_form_attribute.md@71:```

001⫶(function (global, doc, ibexa) {
002⫶    global.addEventListener('load', (event) => {
003⫶        const richtext = new ibexa.BaseRichText();
004⫶
005⫶        // Enable editor in all ibexa-data-source divs
026⫶);
027⫶
028⫶export default ImageTabModule;


code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js

docs/content_management/forms/create_form_attribute.md@69:``` js
docs/content_management/forms/create_form_attribute.md@70:[[= include_file('code_samples/forms/custom_form_attribute/assets/js/formbuilder-richtext-checkbox.js') =]]
docs/content_management/forms/create_form_attribute.md@71:```

001⫶(function (global, doc, ibexa) {
002⫶    global.addEventListener('load', (event) => {
003⫶        const richtext = new ibexa.BaseRichText();
004⫶
005⫶        // Enable editor in all ibexa-data-source divs
006⫶        doc.querySelectorAll('.ibexa-data-source').forEach(
007⫶            (ibexaDataSource) => {
008⫶                const richtextContainer = ibexaDataSource.querySelector(
009⫶                    '.ibexa-data-source__richtext'
010⫶                );
011⫶
012⫶                if (richtextContainer.classList.contains('ck')) {
013⫶                    return;
014⫶                }
015⫶
016⫶                richtext.init(richtextContainer);
017⫶            }
018⫶        );
019⫶    });
020⫶
021⫶    const openUdw = (config) => {
022⫶        const openUdwEvent = new CustomEvent('ibexa-open-udw', { detail: config });
023⫶
024⫶        doc.body.dispatchEvent(openUdwEvent);
025⫶    };
026⫶
027⫶    ibexa.addConfig('richText.alloyEditor.callbacks.selectContent', openUdw);
028⫶})(window, window.document, window.ibexa);
006⫶        doc.querySelectorAll('.ibexa-data-source').forEach((ibexaDataSource) => {
007⫶            const richtextContainer = ibexaDataSource.querySelector('.ibexa-data-source__richtext');
008⫶
009⫶            if (richtextContainer.classList.contains('ck')) {
010⫶                return;
011⫶            }
012⫶
013⫶            richtext.init(richtextContainer);
014⫶        });
015⫶    });
016⫶
017⫶    const openUdw = (config) => {
018⫶        const openUdwEvent = new CustomEvent('ibexa-open-udw', { detail: config });
019⫶
020⫶        doc.body.dispatchEvent(openUdwEvent);
021⫶    };
022⫶
023⫶    ibexa.addConfig('richText.alloyEditor.callbacks.selectContent', openUdw);
024⫶})(window, window.document, window.ibexa);


code_samples/page/react_app_block/assets/page-builder/react/blocks/Calculator.js

docs/content_management/pages/react_app_block.md@90:``` js
docs/content_management/pages/react_app_block.md@91:[[= include_file('code_samples/page/react_app_block/assets/page-builder/react/blocks/Calculator.js') =]]
docs/content_management/pages/react_app_block.md@92:```



code_samples/page/react_app_block/assets/page-builder/react/blocks/Calculator.js

docs/content_management/pages/react_app_block.md@90:``` js
docs/content_management/pages/react_app_block.md@91:[[= include_file('code_samples/page/react_app_block/assets/page-builder/react/blocks/Calculator.js') =]]
docs/content_management/pages/react_app_block.md@92:```

001⫶import Calculator from "/assets/page-builder/components/Calculator";
001⫶import Calculator from '/assets/page-builder/components/Calculator';
002⫶
003⫶export default {
004⫶    Calculator: Calculator,
005⫶};

002⫶
003⫶export default {
004⫶    Calculator: Calculator,
005⫶};

 Download colorized diff

@mnocon mnocon requested a review from dew326 December 12, 2024 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dew326 dew326 dew326 approved these changes

Assignees
No one assigned
Labels
Needs DEV review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@mnocon @dew326