Skip to content

Commit 7bf5c04

Browse files
yukuyuku
committed
Refactor project configuration
1 parent 4d36b8f commit 7bf5c04

27 files changed

+238
-198
lines changed

‎.github/workflows/test.yaml

+5-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ jobs:
88
- uses: actions/setup-node@v1
99
with:
1010
node-version: 12.x
11-
- run: yarn install --no-lockfile && yarn lerna bootstrap
12-
- run: yarn lerna run lint --parallel
13-
- run: yarn lerna run test --parallel
11+
- run: yarn install --no-lockfile
12+
- run: yarn lerna bootstrap
13+
- run: yarn build
14+
- run: yarn lint
15+
- run: yarn test

‎.vscode/textcomplete.code-workspace

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212
"name": "textarea",
1313
"path": "../packages/textcomplete-textarea",
1414
},
15+
{
16+
"name": "contenteditable",
17+
"path": "../packages/textcomplete-contenteditable",
18+
},
1519
{
1620
"name": "codemirror",
1721
"path": "../packages/textcomplete-codemirror",

‎README.md

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ Name | Description
1818

1919
```bash
2020
yarn install
21-
yarn lerna run build
2221
yarn lerna bootstrap
2322
yarn docs
2423
```

‎docs/components/CodeMirror.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const CodeMirror: FC<Props> = (props) => {
3636
const textcomplete = new Textcomplete(editor, strategies, option)
3737
if (triggerImmediately) {
3838
cm.setCursor(0, cm.getValue().length)
39-
textcomplete.trigger(cm.getValue())
39+
textcomplete.trigger(editor.getBeforeCursor())
4040
}
4141
return () => {
4242
textcomplete.destroy()

‎docs/components/Section.tsx

-18
This file was deleted.

‎docs/components/Textarea.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const Textarea: FC<Props> = (props) => {
4444
if (triggerImmediately) {
4545
const value = ref.current.value
4646
ref.current.setSelectionRange(value.length, value.length)
47-
textcomplete.trigger(value)
47+
textcomplete.trigger(editor.getBeforeCursor())
4848
}
4949
return () => {
5050
textcomplete.destroy()

‎docs/main.scss

+13
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,16 @@ $border-color: #ddd;
3636
}
3737
}
3838
}
39+
40+
section {
41+
margin-bottom: 3rem;
42+
}
43+
44+
h1 {
45+
padding-bottom: .5rem;
46+
border-bottom: 1px solid $border-color;
47+
}
48+
49+
h2 {
50+
border: none;
51+
}

‎docs/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@textcomplete/codemirror": "^0.0.0",
15+
"@textcomplete/contenteditable": "^0.0.0",
1516
"@textcomplete/core": "^0.0.0",
1617
"@textcomplete/textarea": "^0.0.0",
1718
"codemirror": "^5.54.0",

‎docs/sections/Usage.tsx

+124-115
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
import { DEFAULT_INDEX } from "../../packages/textcomplete-core/src/Strategy"
1111

1212
import { Code } from "../components/Code"
13-
import { Section } from "../components/Section"
1413

1514
interface Props {
1615
id: string
@@ -127,7 +126,8 @@ const SAMPLE_OPTION = `
127126
`
128127

129128
export const Usage: FC<Props> = ({ id }) => (
130-
<Section id={id} title="Usage">
129+
<section>
130+
<h1 id={id}>Usage</h1>
131131
<Code code="npm install --save @textcomplete/core" language="bash" />
132132
<p>
133133
You also need to install an <a href="#editors">editor</a> package. An
@@ -139,117 +139,126 @@ export const Usage: FC<Props> = ({ id }) => (
139139
with an editor:
140140
</p>
141141
<Code code={INITIALIZE_CODE} language="javascript" />
142-
<h3>How it works</h3>
143-
<ol>
144-
<li>(An input event is triggered to the underlying HTML element.)</li>
145-
<li>
146-
The <code>editor</code> emits a change event.
147-
</li>
148-
<li>
149-
For each registered strategy:
150-
<ol>
151-
<li>[Context phase] Test context (Optional).</li>
152-
<li>
153-
[Match phase] Try extracting a search term. If it fails, continue to
154-
the next strategy.
155-
</li>
156-
<li>
157-
[Search phase] Gather candidates using the search term. The way how
158-
to gather them is completely up to you.
159-
</li>
160-
<li>[Render phase] Show a dropdown UI rendering the candidates.</li>
161-
</ol>
162-
</li>
163-
<li>
164-
When user selects a dropdown item by either clicking it or pushing an
165-
enter key, the <code>editor</code>&apos;s value is updated.
166-
</li>
167-
</ol>
168-
<h3 id="strategy">Strategy</h3>
169-
<p>
170-
A <code>strategy</code> object represents a rule of autocompletion. The{" "}
171-
<code>match</code>, <code>search</code> and <code>replace</code> keys are
172-
required.
173-
</p>
174-
<Code code={SAMPLE_STRATEGY} language="typescript" />
175-
<h3 id="strategy">Option</h3>
176-
<p>
177-
An <code>option</code> object affects rest of behavior.
178-
</p>
179-
<Code code={SAMPLE_OPTION} language="typescript" />
180-
<h3 id="events">Events</h3>
181-
<p>
182-
Textcomplete provides custom events for most actions. Generally, these
183-
come in an infinitive and past participle form - where the infinitive (ex.{" "}
184-
<code>show</code>) is triggered at the start of an event, and its past
185-
participle form (ex. <code>shown</code>) is triggered on the completion of
186-
an action.
187-
</p>
188-
<p>
189-
An infinitive events provide <code>preventDefault</code> functionality.
190-
This provides the ability to stop the execution of an action before it
191-
starts.
192-
</p>
193-
<table>
194-
<thead>
195-
<tr>
196-
<th style={{ minWidth: "100px" }}>Event Type</th>
197-
<th>Description</th>
198-
</tr>
199-
</thead>
200-
<tbody>
201-
<tr>
202-
<td>show</td>
203-
<td>Fired immediately when the dropdown is going to be shown.</td>
204-
</tr>
205-
<tr>
206-
<td>shown</td>
207-
<td>
208-
Fired when the dropdown has been made visible to the user (will wait
209-
for CSS transitions to complete).
210-
</td>
211-
</tr>
212-
<tr>
213-
<td>render</td>
214-
<td>
215-
Fired immediately when dropdown items are goint to be visible to the
216-
user.
217-
</td>
218-
</tr>
219-
<tr>
220-
<td>rendered</td>
221-
<td>
222-
Fired when the dropdown items have been visible to the user (will
223-
wait for CSS transitions to complete).
224-
</td>
225-
</tr>
226-
<tr>
227-
<td>select</td>
228-
<td>Fired immediately when a dropdown item is selected.</td>
229-
</tr>
230-
<tr>
231-
<td>selected</td>
232-
<td>
233-
Fired when the selected dropdown item was applied to the editor
234-
(will wait for CSS transitions to complete).
235-
</td>
236-
</tr>
237-
<tr>
238-
<td>hide</td>
239-
<td>Fired immediately when the dropdown is going to be hidden.</td>
240-
</tr>
241-
<tr>
242-
<td>hidden</td>
243-
<td>
244-
Fired when the dropdown has finished being hidden from the user
245-
(will wait for CSS transitions to complete).
246-
</td>
247-
</tr>
248-
</tbody>
249-
</table>
250-
<p>
251-
The native <code>input</code> event is dispatched to the textarea element
252-
when its value is changed because a search result has been selected.
253-
</p>
254-
</Section>
142+
<section>
143+
<h2>How it works</h2>
144+
<ol>
145+
<li>(An input event is triggered to the underlying HTML element.)</li>
146+
<li>
147+
The <code>editor</code> emits a change event.
148+
</li>
149+
<li>
150+
For each registered strategy:
151+
<ol>
152+
<li>[Context phase] Test context (Optional).</li>
153+
<li>
154+
[Match phase] Try extracting a search term. If it fails, continue
155+
to the next strategy.
156+
</li>
157+
<li>
158+
[Search phase] Gather candidates using the search term. The way
159+
how to gather them is completely up to you.
160+
</li>
161+
<li>[Render phase] Show a dropdown UI rendering the candidates.</li>
162+
</ol>
163+
</li>
164+
<li>
165+
When user selects a dropdown item by either clicking it or pushing an
166+
enter key, the <code>editor</code>&apos;s value is updated.
167+
</li>
168+
</ol>
169+
</section>
170+
<section>
171+
<h2 id="strategy">Strategy</h2>
172+
<p>
173+
A <code>strategy</code> object represents a rule of autocompletion. The{" "}
174+
<code>match</code>, <code>search</code> and <code>replace</code> keys
175+
are required.
176+
</p>
177+
<Code code={SAMPLE_STRATEGY} language="typescript" />
178+
</section>
179+
<section>
180+
<h2 id="strategy">Option</h2>
181+
<p>
182+
An <code>option</code> object affects rest of behavior.
183+
</p>
184+
<Code code={SAMPLE_OPTION} language="typescript" />
185+
</section>
186+
<section>
187+
<h2 id="events">Events</h2>
188+
<p>
189+
Textcomplete provides custom events for most actions. Generally, these
190+
come in an infinitive and past participle form - where the infinitive
191+
(ex. <code>show</code>) is triggered at the start of an event, and its
192+
past participle form (ex. <code>shown</code>) is triggered on the
193+
completion of an action.
194+
</p>
195+
<p>
196+
An infinitive events provide <code>preventDefault</code> functionality.
197+
This provides the ability to stop the execution of an action before it
198+
starts.
199+
</p>
200+
<table>
201+
<thead>
202+
<tr>
203+
<th style={{ minWidth: "100px" }}>Event Type</th>
204+
<th>Description</th>
205+
</tr>
206+
</thead>
207+
<tbody>
208+
<tr>
209+
<td>show</td>
210+
<td>Fired immediately when the dropdown is going to be shown.</td>
211+
</tr>
212+
<tr>
213+
<td>shown</td>
214+
<td>
215+
Fired when the dropdown has been made visible to the user (will
216+
wait for CSS transitions to complete).
217+
</td>
218+
</tr>
219+
<tr>
220+
<td>render</td>
221+
<td>
222+
Fired immediately when dropdown items are goint to be visible to
223+
the user.
224+
</td>
225+
</tr>
226+
<tr>
227+
<td>rendered</td>
228+
<td>
229+
Fired when the dropdown items have been visible to the user (will
230+
wait for CSS transitions to complete).
231+
</td>
232+
</tr>
233+
<tr>
234+
<td>select</td>
235+
<td>Fired immediately when a dropdown item is selected.</td>
236+
</tr>
237+
<tr>
238+
<td>selected</td>
239+
<td>
240+
Fired when the selected dropdown item was applied to the editor
241+
(will wait for CSS transitions to complete).
242+
</td>
243+
</tr>
244+
<tr>
245+
<td>hide</td>
246+
<td>Fired immediately when the dropdown is going to be hidden.</td>
247+
</tr>
248+
<tr>
249+
<td>hidden</td>
250+
<td>
251+
Fired when the dropdown has finished being hidden from the user
252+
(will wait for CSS transitions to complete).
253+
</td>
254+
</tr>
255+
</tbody>
256+
</table>
257+
<p>
258+
The native <code>input</code> event is dispatched to the textarea
259+
element when its value is changed because a search result has been
260+
selected.
261+
</p>
262+
</section>
263+
</section>
255264
)

‎lerna.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
"npmClient": "yarn",
33
"useWorkspaces": true,
44
"packages": [
5-
"packages/textcomplete-core",
6-
"packages/textcomplete-textarea",
7-
"packages/textcomplete-codemirror",
5+
"packages/textcomplete-*",
86
"docs"
97
],
108
"version": "independent"

‎package.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
"name": "root",
33
"private": true,
44
"workspaces": [
5-
"packages/textcomplete-core",
6-
"packages/textcomplete-textarea",
7-
"packages/textcomplete-codemirror",
5+
"packages/textcomplete-*",
86
"docs"
97
],
108
"scripts": {
11-
"docs": "lerna run start --scope docs --stream --no-prefix"
9+
"build": "lerna run build",
10+
"docs": "run-s build start",
11+
"lint": "lerna run lint --parallel",
12+
"start": "lerna run start --scope docs --stream --no-prefix",
13+
"test": "lerna run test --parallel"
1214
},
1315
"devDependencies": {
1416
"lerna": "^3.22.1",

‎packages/textcomplete-codemirror/.npmignore

-17
This file was deleted.

0 commit comments

Comments
 (0)