RecentSymbolsGrid

Type: React component

How to get RecentSymbolsGrid?

JavaScript

import RecentSymbolsGrid from 'fontoxml-special-characters/src/RecentSymbolsGrid.jsx'

Renders a grid of buttons for the recently used characters. Those characters are cached centrally during the lifetime of the browser window.

If you use a character from this grid or the modal opened by open-special-character-modal operation, that character is rendered in the beginning of this grid.

It is possible to specify a fallback character set if any character has not been used yet. Beside that, a maximum number of characters can be set to render in the grid.

Props

  1. fallbackCharacterSet

    (Optional)

    Type: String

    The name of the character set to display, as used in SpecialCharactersManager#addCharacterSet. When there is no recently used symbols enough yet, these characters will be shown after the recent symbols.

  2. columns

    (Optional)

    Type: Number

    The number of columns to use in the grid.

    Default value

  3. maxCharacters

    (Optional)

    Type: Number

    The maximum number of characters to use in the grid. Recommended to use a multiple of columns.

    Default value

  4. onItemClick

    (Optional)

    Type: FX~OnItemClickCallback

    Function to be called when an item in the grid is clicked.

    This can be used, for example, to close the Drop containing the grid when a character is inserted.

    Default value

  5. primaryFontFamily

    (Optional)

    Type: String

    A CSS font-family string that will be prepended to the default FDS 'content' font-family to render the Unicode symbols. (The default 'content' font-family is: Merriweather, Georgia, 'Times New Roman', Times, BravuraRegular, BravuraTextRegular, Code2000Regular, Code2001Regular, serif). Note: when the browser renders a character (of a Unicode symbol) it uses the first font in the font-family string that has a glyph for that character. So by prepending a custom font name, that font gets the first chance to provide a glyph and render the character.

    This can be used to render certain unicode icons you use commonly in your publications with your own custom (publication) font. This is usually set when using a custom (publication) font for certain/all parts of your document in the editor (via the registerFontStack API and related fontStack CVK option).

    Setting the same font-family for both the CVK content and the special characters UI ensures users do not get confused by having the same symbol render differently in different places.