Giter VIP home page Giter VIP logo

shel.neos.hyphens's Introduction

Hyphens CKEditor5 plugin for Neos CMS

Latest Stable Version Total Downloads License

Introduction

This package provides a button to insert soft hyphens and non-breaking spaces for the inline editor in Neos CMS.

Many browsers support some kind of hyphenation via CSS, but it doesn't work reliably on all systems and not with all languages. See the CanIuse table for details.

Therefore this package provides a manual way to insert them. You should be careful with using the CSS-based hyphenation in combination with the manual hyphens as results can be unexpected.

It's compatible with Neos CMS 4.3, 5 and 7.

Example

In the backend, this plugin will add the option to add soft hyphens. They will look like this while editing:

Visible hyphens while editing

And in the frontend will convert this:

Unwanted hyphenation without soft hyphens

Into this:

Expected hyphenation

And in action:

Expected hyphenation

Advantages

  • Your editors gain control over word breaks.
  • Stores the special character in the database with their UTF8 representation, which the browser interprets as ­.
  • You don't need other characters which you replace with correct characters in the frontend.
  • Should work fine with Elasticsearch and other search engines.

Planned features

See enhancement issue list.

Installation

Run this in your site package

composer require --no-update shel/neos-hyphens

Then run composer update in your project directory.

How to use

Hyphen

Enable it for a node with editable text like this:

'Neos.NodeTypes:Text':
  properties:
    text:
      ui:
        inline:
          editorOptions:
            hyphens: true

This will add a new button to insert a soft hyphen. As an alternative, you can use the shortcut Ctrl + Shift + - to add a new soft hyphen. To change the shortcut keys, have a look at the Settings.yaml file.

Non-breaking space

Enable it for a node with editable text like this:

'Neos.NodeTypes:Text':
  properties:
    text:
      ui:
        inline:
          editorOptions:
            nbsp: true

This will add a new button to insert a non-breaking space.

Customization

Hyphen & non-breaking space styling in the backend

You can provide your own styling by referencing your own stylesheet. See the file Override.Page.fusion on how the default styling is included.

You can either override the configuration from your own package and just use your stylesheet or you can add yours and use both.

Contributions

Contributions are very welcome!

Please create detailed issues and PRs.

If you use this package and want to support or speed up it's development, get in touch with me.

Or you can also support me directly via patreon.

License

See License

shel.neos.hyphens's People

Contributors

benjamin-k avatar dependabot-preview[bot] avatar dependabot[bot] avatar jonnitto avatar rolandschuetz avatar sebobo avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.