Skip to content

Commit

Permalink
Improve JS support
Browse files Browse the repository at this point in the history
  • Loading branch information
@deanishe
deanishe committed Feb 14, 2021
1 parent d239089 commit 564c867
Show file tree
Hide file tree
Showing 9 changed files with 218 additions and 63 deletions.
2 changes: 1 addition & 1 deletion .githooks/pre-commit
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ _getvar() {
# }

# exit if a variable is set
names=(FONT_NAME TEXT_SIZE TEXT_COLOUR BACKGROUND_COLOUR DISABLED)
names=(FONT_NAME TEXT_SIZE TEXT_COLOUR BACKGROUND_COLOUR DISABLED ES6_MODE)
for name in $names; do
test -n "$( _getvar $name )" && _fail "info.plist: $name is not empty"
done
Expand Down
92 changes: 80 additions & 12 deletions README.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<h1><a name="alfred-unicode" class="anchor" href="#alfred-unicode" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Alfred Unicode</h1>

<p>Search Unicode and copy/paste codepoints as HTML entities, Go or Python string literals, hexadecimal numbers etc. in Alfred 4+.</p>
<p>Search Unicode and copy/paste characters as HTML entities, Go or Python string literals, hexadecimal numbers etc. in Alfred 4+.</p>

<div class="centred">
<img width="570" height="505" src="https://raw.githubusercontent.com/deanishe/alfred-unicode/master/demo.gif" alt="animated workflow demo" title="animated workflow demo">
Expand All @@ -70,7 +70,11 @@ <h1><a name="alfred-unicode" class="anchor" href="#alfred-unicode" rel="nofollow
<ul>
<li><a href="#modifiers" rel="nofollow">Modifiers</a></li>
</ul></li>
<li><a href="#formats" rel="nofollow">Formats</a></li>
<li><a href="#formats" rel="nofollow">Formats</a>

<ul>
<li><a href="#notes" rel="nofollow">Notes</a></li>
</ul></li>
<li><a href="#licensing--thanks" rel="nofollow">Licensing &amp; thanks</a></li>
</ul>

Expand All @@ -87,17 +91,17 @@ <h2><a name="usage" class="anchor" href="#usage" rel="nofollow" aria-hidden="tru
Usage</h2>

<ul>
<li><code>.u &lt;query&gt;</code> — Search Unicode codepoints (see <a href="#input" rel="nofollow">input</a> below).
<li><code>.u &lt;query&gt;</code> — Search Unicode characters (see <a href="#input" rel="nofollow">input</a> below).

<ul>
<li><code>⇧</code> or <code>⌘Y</code> — Quick Look image of selected codepoint.</li>
<li><code>↩</code> or <code>⇥</code> — View selected codepoint in various formats (CSS, HTML, Python etc.).
<li><code>⇧</code> or <code>⌘Y</code> — Quick Look image of selected character.</li>
<li><code>↩</code> or <code>⇥</code> — View selected character in various formats (CSS, HTML, Python etc.).

<ul>
<li><code>↩</code> or <code>⌘C</code> — Copy selected format to clipboard.</li>
<li><code>⌘↩</code> — Paste selected format to frontmost application.</li>
</ul></li>
<li><code>⌘↩</code> (<a href="#modifiers" rel="nofollow">configurable</a>) — Copy/paste Unicode character.</li>
<li><code>⌘↩</code> (<a href="#modifiers" rel="nofollow">configurable</a>) — Copy/paste UTF-8 character.</li>
<li><code>⌥↩</code> (<a href="#modifiers" rel="nofollow">configurable</a>) — Copy/paste Python Unicode escape.</li>
<li><code>^↩</code> (<a href="#modifiers" rel="nofollow">configurable</a>) — Copy/paste Unicode ID (U+00AB).</li>
<li><code>⇧↩</code> (<a href="#modifiers" rel="nofollow">configurable</a>) — Copy/paste HTML hexadecimal entity.</li>
Expand All @@ -114,6 +118,7 @@ <h2><a name="usage" class="anchor" href="#usage" rel="nofollow" aria-hidden="tru
<ul>
<li><code>↩</code> — To view formatter list and to toggle formatters on/off.</li>
</ul></li>
<li><strong>ES6 Mode</strong> — Use ES6-style <code>\u{1F680}</code> escapes in JS for characters above 0xFFFF.</li>
<li><strong>Font: Arial Unicode MS (default)</strong> — Font used to generate preview images.

<ul>
Expand Down Expand Up @@ -144,11 +149,55 @@ <h2><a name="usage" class="anchor" href="#usage" rel="nofollow" aria-hidden="tru
<h3><a name="input" class="anchor" href="#input" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Input</h3>

<p>Apart from the names of codepoints, you can search by hexadecimal or decimal values (e.g. <code>fe</code>, <code>00fe</code>, <code>32</code> etc.). The workflow will also accept any format it generates, such as Go string escapes (<code>\U0001F37B</code>).</p>
<p>Use the special search queries <code>search</code>, <code>prefs</code> and <code>help</code> to navigate to the workflow&#39;s search, preferences and help file respectively. These work throughout the workflow.</p>

<p><strong>Single-character queries</strong> are treated as exact matches for their own codepoint: if you enter <code>p</code>, you will only see the result for U+0070 <code>LATIN SMALL LETTER P</code>. To search for <em>all</em> P&#39;s, add a space after <code>p</code> (i.e. <code>p</code>).</p>

<p>You can search for characters based on their <strong>names</strong> (e.g. <code>LATIN CAPITAL LETTER U WITH DIAERESIS</code>), <strong>aliases</strong> (e.g. <code>EOL</code>/<code>LF</code>/<code>NL</code>/<code>NEW LINE</code> for <code>LINE FEED (LF)</code>), <strong>hexadecimal</strong> (e.g. <code>fe</code>, <code>00fe</code>, <code>0xfe</code>) or <strong>decimal</strong> (e.g. <code>32</code>), or HTML entity name (e.g. <code>raquo</code>, <code>Uuml</code>).</p>

<p>The workflow understands all formats it generates, so you can also enter a Go string escape (e.g. <code>\U0001F37B</code>) or Unicode ID (e.g. <code>U+1F4A9</code>). Configure the included Hotkey to be able to look up escapes directly from your editor.</p>

<p>You can restrict search to a particular field with the syntax <code>&lt;field&gt;:&lt;query&gt;</code>, e.g. <code>entity:copy</code> to find characters whose HTML entity name matches <code>copy</code>. The available fields are:</p>

<table>
<thead>
<tr>
<th>Field</th>
<th>Description</th>
</tr>
</thead>

<tbody>
<tr>
<td><code>name</code></td>
<td>Character name, e.g. <code>PILE OF POO</code></td>
</tr>

<tr>
<td><code>aliases</code></td>
<td>Alternate names, e.g. <code>BS</code> for <code>BACKSPACE</code></td>
</tr>

<tr>
<td><code>hex</code></td>
<td>4+ character hexadecimal representation, e.g. <code>00FE</code></td>
</tr>

<tr>
<td><code>dec</code></td>
<td>Decimal representation, e.g. <code>254</code></td>
</tr>

<tr>
<td><code>entity</code></td>
<td>HTML entity name (if any), e.g. <code>szlig</code></td>
</tr>
</tbody>
</table>

<p>As the workflow uses a full-text search database, you can also use <code>AND</code> or <code>OR</code> in your queries, e.g. <code>arrow AND left OR right</code> (note <code>AND</code> and <code>OR</code> <strong>must</strong> be uppercase).</p>
<p><strong>Note</strong>: All fields are treated as text, so <code>hex:20</code> will return characters <code>0x20HH</code>, <em>not</em> <code>0x20</code> (<code>dec:32</code> will match <code>0x20</code>, but also <code>32NN</code>). Use <code>0x</code> format to specify that a query is hexadecimal, i.e. <code>0x20</code>. Append a space to <code>dec:NN</code> queries to only match that specific character (i.e. <code>dec:32</code>).</p>

<p>Use the special search queries <code>search</code>, <code>prefs</code> and <code>help</code> to navigate to the workflow&#39;s search, preferences and help file respectively.</p>
<p>Finally, you can also use <code>AND</code> or <code>OR</code> in your queries, e.g. <code>arrow AND left OR right</code> (note <code>AND</code> and <code>OR</code> <strong>must</strong> be uppercase).</p>

<p><a id="configuration"></a></p>
<h2><a name="configuration" class="anchor" href="#configuration" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Expand All @@ -172,6 +221,18 @@ <h2><a name="configuration" class="anchor" href="#configuration" rel="nofollow"
<td>Background colour of generated preview images (search result icons). Uses transparent if unset.</td>
</tr>

<tr>
<td><code>DISABLED</code></td>
<td><code>&lt;empty&gt;</code></td>
<td>Comma-separated list of disabled formatters.</td>
</tr>

<tr>
<td><code>ES6_MODE</code></td>
<td><code>&lt;empty&gt;</code></td>
<td>Use ES6-style escapes for characters over 0xFFFF. If unset, surrogate pairs are used.</td>
</tr>

<tr>
<td><code>FONT_NAME</code></td>
<td><code>&lt;empty&gt;</code></td>
Expand Down Expand Up @@ -224,7 +285,7 @@ <h3><a name="modifiers" class="anchor" href="#modifiers" rel="nofollow" aria-hid
<h2><a name="formats" class="anchor" href="#formats" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Formats</h2>

<p>You can copy (and paste) each codepoint in some or all of the following formats:</p>
<p>You can copy (and paste) each character in some or all of the following formats:</p>

<table>
<thead>
Expand All @@ -243,7 +304,7 @@ <h2><a name="formats" class="anchor" href="#formats" rel="nofollow" aria-hidden=
</tr>

<tr>
<td>Codepoint name</td>
<td>Character name</td>
<td><code>name</code></td>
<td><code>CLINKING BEER MUGS</code></td>
</tr>
Expand Down Expand Up @@ -312,7 +373,14 @@ <h2><a name="formats" class="anchor" href="#formats" rel="nofollow" aria-hidden=

<p><strong>TIP</strong>: You can get the short name for a format by using <code>⌘C</code> on its item in the detail view.</p>

<p><strong>NOTE:</strong> The JavaScript formatter outputs <code>\uABCD</code>-style escapes for codepoints up to 0xFFFF, and ES6 <code>\u{1ABCD}</code>-style escapes for codepoints above that.</p>
<p><a id="notes"></a></p>
<h3><a name="notes" class="anchor" href="#notes" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Notes</h3>

<ul>
<li>The Python/Go formatter outputs <code>\u00AB</code>-style escapes for characters up to 0xFFFF and <code>\U000ABCDE</code>-style escapes for higher ones.</li>
<li>The JavaScript formatter outputs <code>\xAB</code>-style escapes for characters up to 0xFF, <code>\uABCD</code>-style escapes for characters up to 0xFFFF, and surrogate pairs for characters above that. Turn on <strong>ES6 Mode</strong> in the workflow settings to use ES6 <code>\u{1ABCD}</code>-style escapes instead of surrogate pairs.</li>
</ul>

<p><a id="licensing--thanks"></a></p>
<h2><a name="licensing-thanks" class="anchor" href="#licensing-thanks" rel="nofollow" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Expand Down
68 changes: 45 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<img width="128" height="128" src="https://raw.githubusercontent.com/deanishe/alfred-unicode/master/icons/icon-large.png" alt="workflow icon" title="workflow icon">
</div>

Alfred Unicode
==============

Search Unicode and copy/paste codepoints as HTML entities, Go or Python string literals, hexadecimal numbers etc. in Alfred 4+.
# Alfred Unicode #

Search Unicode and copy/paste characters as HTML entities, Go or Python string literals, hexadecimal numbers etc. in Alfred 4+.

<div align="center" class="centred">
<img width="570" height="505" src="https://raw.githubusercontent.com/deanishe/alfred-unicode/master/demo.gif" alt="animated workflow demo" title="animated workflow demo">
Expand All @@ -20,27 +20,27 @@ Search Unicode and copy/paste codepoints as HTML entities, Go or Python string l
- [Configuration](#configuration)
- [Modifiers](#modifiers)
- [Formats](#formats)
- [Notes](#notes)
- [Licensing & thanks](#licensing--thanks)

<!-- /MarkdownTOC -->


<a id="installation"></a>
Installation
------------
## Installation ##

Download the latest version of the workflow from the [releases page][releases], then double-click the `Alfred Unicode-X.X.X.alfredworkflow` file to install.


<a id="usage"></a>
Usage
-----
## Usage ##

- `.u <query>` — Search Unicode codepoints (see [input](#input) below).
- `⇧` or `⌘Y` — Quick Look image of selected codepoint.
- `↩` or `⇥` — View selected codepoint in various formats (CSS, HTML, Python etc.).
- `.u <query>` — Search Unicode characters (see [input](#input) below).
- `⇧` or `⌘Y` — Quick Look image of selected character.
- `↩` or `⇥` — View selected character in various formats (CSS, HTML, Python etc.).
- `↩` or `⌘C` — Copy selected format to clipboard.
- `⌘↩` — Paste selected format to frontmost application.
- `⌘↩` ([configurable](#modifiers)) — Copy/paste Unicode character.
- `⌘↩` ([configurable](#modifiers)) — Copy/paste UTF-8 character.
- `⌥↩` ([configurable](#modifiers)) — Copy/paste Python Unicode escape.
- `^↩` ([configurable](#modifiers)) — Copy/paste Unicode ID (U+00AB).
- `⇧↩` ([configurable](#modifiers)) — Copy/paste HTML hexadecimal entity.
Expand All @@ -51,6 +51,7 @@ Usage
- **Workflow Is Up To Date** / **Update Available!** — Whether a new version of the workflow is available. Action this item to force an update check.
- **Formatters** — Disable formatters you don't want.
- `↩` — To view formatter list and to toggle formatters on/off.
- **ES6 Mode** — Use ES6-style `\u{1F680}` escapes in JS for characters above 0xFFFF.
- **Font: Arial Unicode MS (default)** — Font used to generate preview images.
- `↩` — Choose a different font
- `⌘↩` — Reset to default
Expand All @@ -70,22 +71,39 @@ Configure the included Hotkey to allow you to search directly from other applica
<a id="input"></a>
### Input ###

Apart from the names of codepoints, you can search by hexadecimal or decimal values (e.g. `fe`, `00fe`, `32` etc.). The workflow will also accept any format it generates, such as Go string escapes (`\U0001F37B`).
Use the special search queries `search`, `prefs` and `help` to navigate to the workflow's search, preferences and help file respectively. These work throughout the workflow.

**Single-character queries** are treated as exact matches for their own codepoint: if you enter `p`, you will only see the result for U+0070 `LATIN SMALL LETTER P`. To search for *all* P's, add a space after `p` (i.e. `p `).

You can search for characters based on their **names** (e.g. `LATIN CAPITAL LETTER U WITH DIAERESIS`), **aliases** (e.g. `EOL`/`LF`/`NL`/`NEW LINE` for `LINE FEED (LF)`), **hexadecimal** (e.g. `fe`, `00fe`, `0xfe`) or **decimal** (e.g. `32`), or HTML entity name (e.g. `raquo`, `Uuml`).

The workflow understands all formats it generates, so you can also enter a Go string escape (e.g. `\U0001F37B`) or Unicode ID (e.g. `U+1F4A9`). Configure the included Hotkey to be able to look up escapes directly from your editor.

As the workflow uses a full-text search database, you can also use `AND` or `OR` in your queries, e.g. `arrow AND left OR right` (note `AND` and `OR` **must** be uppercase).
You can restrict search to a particular field with the syntax `<field>:<query>`, e.g. `entity:copy` to find characters whose HTML entity name matches `copy`. The available fields are:

Use the special search queries `search`, `prefs` and `help` to navigate to the workflow's search, preferences and help file respectively.
| Field | Description |
|-----------|------------------------------------------------------|
| `name` | Character name, e.g. `PILE OF POO` |
| `aliases` | Alternate names, e.g. `BS` for `BACKSPACE` |
| `hex` | 4+ character hexadecimal representation, e.g. `00FE` |
| `dec` | Decimal representation, e.g. `254` |
| `entity` | HTML entity name (if any), e.g. `szlig` |

**Note**: All fields are treated as text, so `hex:20` will return characters `0x20HH`, *not* `0x20` (`dec:32` will match `0x20`, but also `32NN`). Use `0x` format to specify that a query is hexadecimal, i.e. `0x20`. Append a space to `dec:NN` queries to only match that specific character (i.e. `dec:32 `).

Finally, you can also use `AND` or `OR` in your queries, e.g. `arrow AND left OR right` (note `AND` and `OR` **must** be uppercase).


<a id="configuration"></a>
Configuration
-------------
## Configuration ##

The workflow can be configured via several [workflow environment variables][config-sheet]. The most important ones can be set in the workflow by entering the query "prefs" in the Unicode search.

| Variable | Default | Description |
|---------------------|-----------|-------------------------------------------------------------------------------------------------|
| `BACKGROUND_COLOUR` | `<empty>` | Background colour of generated preview images (search result icons). Uses transparent if unset. |
| `DISABLED` | `<empty>` | Comma-separated list of disabled formatters. |
| `ES6_MODE` | `<empty>` | Use ES6-style escapes for characters over 0xFFFF. If unset, surrogate pairs are used. |
| `FONT_NAME` | `<empty>` | Font used to generate preview images. Uses "Arial Unicode MS" if unset. |
| `ICON_SIZE` | `128` | Width/height of preview images. |
| `RESIZE_FACTOR` | `1.0` | Use larger/smaller font size in preview images. |
Expand All @@ -110,15 +128,14 @@ Valid modifiers are `CMD`, `OPT`, `SHIFT`, `CTRL`.


<a id="formats"></a>
Formats
-------
## Formats ##

You can copy (and paste) each codepoint in some or all of the following formats:
You can copy (and paste) each character in some or all of the following formats:

| Description | Short name | Example |
|-----------------------------|---------------|----------------------|
| UTF-8 character | `character` | `🍻` |
| Codepoint name | `name` | `CLINKING BEER MUGS` |
| Character name | `name` | `CLINKING BEER MUGS` |
| Unicode ID | `unicode` | `U+1F37B` |
| Hex literal | `hexadecimal` | `0x1F37B` |
| Decimal literal | `decimal` | `127867` |
Expand All @@ -132,17 +149,22 @@ You can copy (and paste) each codepoint in some or all of the following formats:

**TIP**: You can get the short name for a format by using `⌘C` on its item in the detail view.

**NOTE:** The JavaScript formatter outputs `\uABCD`-style escapes for codepoints up to 0xFFFF, and ES6 `\u{1ABCD}`-style escapes for codepoints above that.

<a id="notes"></a>
### Notes ###

- The Python/Go formatter outputs `\u00AB`-style escapes for characters up to 0xFFFF and `\U000ABCDE`-style escapes for higher ones.
- The JavaScript formatter outputs `\xAB`-style escapes for characters up to 0xFF, `\uABCD`-style escapes for characters up to 0xFFFF, and surrogate pairs for characters above that. Turn on **ES6 Mode** in the workflow settings to use ES6 `\u{1ABCD}`-style escapes instead of surrogate pairs.


<a id="licensing--thanks"></a>
Licensing & thanks
------------------
## Licensing & thanks ##

- The workflow is released under the [MIT licence][mit].
- It is heavily based on the [AwGo][awgo] library, also MIT licensed.
- The workflow icons are based on [Font Awesome][awesome], released under the [Creative Commons Attribution 4.0 licence][ccby40].


[releases]: https://github.com/deanishe/alfred-unicode/releases/latest
[issues]: https://github.com/deanishe/alfred-unicode/issues
[mit]: LICENCE.txt
Expand Down
22 changes: 21 additions & 1 deletion config.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ type options struct {
IconSize int
TextColour string
BackgroundColour string
Disabled string `env:"disabled"`
ES6Mode bool `env:"ES6_MODE"`

Disabled string `env:"disabled"`

ActiveApp string `env:"active_app"`
SpinnerCounter int `env:"spinner_counter"`
Expand Down Expand Up @@ -145,6 +147,24 @@ func runConfig() {
Var("trigger", "choose").
Var("trigger_query", "formatters")

// ES6 mode
icon = iconToggleOff
arg := "true"
if opts.ES6Mode {
icon = iconToggleOn
arg = ""
}
wf.NewItem("ES6 Mode").
Subtitle("Use ES6-style escapes for codepoints over 0xFFFF").
Arg(arg).
UID("es6mode").
Valid(true).
Icon(icon).
Var("action", "setconfig").
Var("varname", "ES6_MODE").
Var("trigger", "config").
Var("trigger_query", "")

// font
title = "Font: " + opts.FontName
if opts.FontIsDefault() {
Expand Down
Loading

0 comments on commit 564c867

Please sign in to comment.