Mailspring/docs/classes/Contenteditable.html

1445 lines
34 KiB
HTML
Raw Normal View History

2017-01-30 18:49:48 +08:00
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Contenteditable · Nylas Mail Plugin SDK</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../styles/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="KeyCommandsRegion.html" />
<link rel="prev" href="Config.html" />
<link rel="shortcut icon" href='../img/favicon.png' type="image/x-icon">
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" >
<span>
Nylas Mail SDK Guides
</span>
</li>
<li class="chapter " data-level="1.2" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.3" data-path="../guides/GettingStarted.html">
<a href="../guides/GettingStarted.html">
Getting Started
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../guides/GettingStarted-2.html">
<a href="../guides/GettingStarted-2.html">
Getting Started Part 2
</a>
</li>
<li class="chapter " data-level="1.5" data-path="../guides/PackageOverview.html">
<a href="../guides/PackageOverview.html">
Building a Package
</a>
</li>
<li class="chapter " data-level="1.6" data-path="../guides/InterfaceConcepts.html">
<a href="../guides/InterfaceConcepts.html">
Interface Concepts
</a>
</li>
<li class="chapter " data-level="1.7" data-path="../guides/React.html">
<a href="../guides/React.html">
UI Components
</a>
</li>
<li class="chapter " data-level="1.8" data-path="../guides/Architecture.html">
<a href="../guides/Architecture.html">
Application Architecture
</a>
</li>
<li class="chapter " data-level="1.9" data-path="../guides/Debugging.html">
<a href="../guides/Debugging.html">
Debugging Nylas Mail
</a>
</li>
<li class="chapter " data-level="1.10" data-path="../guides/Database.html">
<a href="../guides/Database.html">
Accessing the Database
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../guides/ComposerExtensions.html">
<a href="../guides/ComposerExtensions.html">
Extending the Composer
</a>
</li>
<li class="chapter " data-level="1.12" data-path="../guides/WritingSpecs.html">
<a href="../guides/WritingSpecs.html">
Writing Tests
</a>
</li>
<li class="chapter " data-level="1.13" data-path="../guides/IntegrationTesting.html">
<a href="../guides/IntegrationTesting.html">
Integration Testing
</a>
</li>
<li class="chapter " data-level="1.14" data-path="../guides/Windows.html">
<a href="../guides/Windows.html">
Developing on Windows
</a>
</li>
<li class="chapter " data-level="1.15" data-path="../guides/FAQ.html">
<a href="../guides/FAQ.html">
FAQ
</a>
</li>
<li class="header">Full Class Reference</li>
<li class="chapter " data-level="2.1" >
<span>
General
</span>
<ul class="articles">
<li class="chapter " data-level="2.1.1" data-path="Actions.html">
<a href="Actions.html">
Actions
</a>
</li>
<li class="chapter " data-level="2.1.2" data-path="BufferedProcess.html">
<a href="BufferedProcess.html">
BufferedProcess
</a>
</li>
<li class="chapter " data-level="2.1.3" data-path="ChangeFolderTask.html">
<a href="ChangeFolderTask.html">
ChangeFolderTask
</a>
</li>
<li class="chapter " data-level="2.1.4" data-path="ChangeLabelsTask.html">
<a href="ChangeLabelsTask.html">
ChangeLabelsTask
</a>
</li>
<li class="chapter " data-level="2.1.5" data-path="ChangeMailTask.html">
<a href="ChangeMailTask.html">
ChangeMailTask
</a>
</li>
<li class="chapter " data-level="2.1.6" data-path="Color.html">
<a href="Color.html">
Color
</a>
</li>
<li class="chapter " data-level="2.1.7" data-path="Config.html">
<a href="Config.html">
Config
</a>
</li>
<li class="chapter active" data-level="2.1.8" data-path="Contenteditable.html">
<a href="Contenteditable.html">
Contenteditable
</a>
</li>
<li class="chapter " data-level="2.1.9" data-path="KeyCommandsRegion.html">
<a href="KeyCommandsRegion.html">
KeyCommandsRegion
</a>
</li>
<li class="chapter " data-level="2.1.10" data-path="NylasEnvConstructor.html">
<a href="NylasEnvConstructor.html">
NylasEnvConstructor
</a>
</li>
<li class="chapter " data-level="2.1.11" data-path="QueryResultSet.html">
<a href="QueryResultSet.html">
QueryResultSet
</a>
</li>
<li class="chapter " data-level="2.1.12" data-path="QuerySubscriptionPool.html">
<a href="QuerySubscriptionPool.html">
QuerySubscriptionPool
</a>
</li>
<li class="chapter " data-level="2.1.13" data-path="StyleManager.html">
<a href="StyleManager.html">
StyleManager
</a>
</li>
<li class="chapter " data-level="2.1.14" data-path="Task.html">
<a href="Task.html">
Task
</a>
</li>
<li class="chapter " data-level="2.1.15" data-path="TaskQueueStatusStore.html">
<a href="TaskQueueStatusStore.html">
TaskQueueStatusStore
</a>
</li>
<li class="chapter " data-level="2.1.16" data-path="ThemeManager.html">
<a href="ThemeManager.html">
ThemeManager
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.2" >
<span>
Component Kit
</span>
<ul class="articles">
<li class="chapter " data-level="2.2.1" data-path="EventedIFrame.html">
<a href="EventedIFrame.html">
EventedIFrame
</a>
</li>
<li class="chapter " data-level="2.2.2" data-path="Flexbox.html">
<a href="Flexbox.html">
Flexbox
</a>
</li>
<li class="chapter " data-level="2.2.3" data-path="InjectedComponent.html">
<a href="InjectedComponent.html">
InjectedComponent
</a>
</li>
<li class="chapter " data-level="2.2.4" data-path="InjectedComponentSet.html">
<a href="InjectedComponentSet.html">
InjectedComponentSet
</a>
</li>
<li class="chapter " data-level="2.2.5" data-path="Menu.html">
<a href="Menu.html">
Menu
</a>
</li>
<li class="chapter " data-level="2.2.6" data-path="MenuItem.html">
<a href="MenuItem.html">
MenuItem
</a>
</li>
<li class="chapter " data-level="2.2.7" data-path="MenuNameEmailItem.html">
<a href="MenuNameEmailItem.html">
MenuNameEmailItem
</a>
</li>
<li class="chapter " data-level="2.2.8" data-path="MultiselectActionBar.html">
<a href="MultiselectActionBar.html">
MultiselectActionBar
</a>
</li>
<li class="chapter " data-level="2.2.9" data-path="MultiselectList.html">
<a href="MultiselectList.html">
MultiselectList
</a>
</li>
<li class="chapter " data-level="2.2.10" data-path="ResizableRegion.html">
<a href="ResizableRegion.html">
ResizableRegion
</a>
</li>
<li class="chapter " data-level="2.2.11" data-path="RetinaImg.html">
<a href="RetinaImg.html">
RetinaImg
</a>
</li>
<li class="chapter " data-level="2.2.12" data-path="Spinner.html">
<a href="Spinner.html">
Spinner
</a>
</li>
<li class="chapter " data-level="2.2.13" data-path="UnsafeComponent.html">
<a href="UnsafeComponent.html">
UnsafeComponent
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.3" >
<span>
Extensions
</span>
<ul class="articles">
<li class="chapter " data-level="2.3.1" data-path="ComposerExtension.html">
<a href="ComposerExtension.html">
ComposerExtension
</a>
</li>
<li class="chapter " data-level="2.3.2" data-path="ContenteditableExtension.html">
<a href="ContenteditableExtension.html">
ContenteditableExtension
</a>
</li>
<li class="chapter " data-level="2.3.3" data-path="DraftStoreExtension.html">
<a href="DraftStoreExtension.html">
DraftStoreExtension
</a>
</li>
<li class="chapter " data-level="2.3.4" data-path="MessageStoreExtension.html">
<a href="MessageStoreExtension.html">
MessageStoreExtension
</a>
</li>
<li class="chapter " data-level="2.3.5" data-path="MessageViewExtension.html">
<a href="MessageViewExtension.html">
MessageViewExtension
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.4" >
<span>
Models
</span>
<ul class="articles">
<li class="chapter " data-level="2.4.1" data-path="Contact.html">
<a href="Contact.html">
Contact
</a>
</li>
<li class="chapter " data-level="2.4.2" data-path="Message.html">
<a href="Message.html">
Message
</a>
</li>
<li class="chapter " data-level="2.4.3" data-path="Model.html">
<a href="Model.html">
Model
</a>
</li>
<li class="chapter " data-level="2.4.4" data-path="Thread.html">
<a href="Thread.html">
Thread
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.5" >
<span>
Stores
</span>
<ul class="articles">
<li class="chapter " data-level="2.5.1" data-path="AccountStore.html">
<a href="AccountStore.html">
AccountStore
</a>
</li>
<li class="chapter " data-level="2.5.2" data-path="ComponentRegistry.html">
<a href="ComponentRegistry.html">
ComponentRegistry
</a>
</li>
<li class="chapter " data-level="2.5.3" data-path="ContactStore.html">
<a href="ContactStore.html">
ContactStore
</a>
</li>
<li class="chapter " data-level="2.5.4" data-path="FocusedContentStore.html">
<a href="FocusedContentStore.html">
FocusedContentStore
</a>
</li>
<li class="chapter " data-level="2.5.5" data-path="TaskQueue.html">
<a href="TaskQueue.html">
TaskQueue
</a>
</li>
<li class="chapter " data-level="2.5.6" data-path="WorkspaceStore.html">
<a href="WorkspaceStore.html">
WorkspaceStore
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.6" >
<span>
Database
</span>
<ul class="articles">
<li class="chapter " data-level="2.6.1" data-path="Attribute.html">
<a href="Attribute.html">
Attribute
</a>
</li>
<li class="chapter " data-level="2.6.2" data-path="AttributeBoolean.html">
<a href="AttributeBoolean.html">
AttributeBoolean
</a>
</li>
<li class="chapter " data-level="2.6.3" data-path="AttributeCollection.html">
<a href="AttributeCollection.html">
AttributeCollection
</a>
</li>
<li class="chapter " data-level="2.6.4" data-path="AttributeDateTime.html">
<a href="AttributeDateTime.html">
AttributeDateTime
</a>
</li>
<li class="chapter " data-level="2.6.5" data-path="AttributeJoinedData.html">
<a href="AttributeJoinedData.html">
AttributeJoinedData
</a>
</li>
<li class="chapter " data-level="2.6.6" data-path="AttributeNumber.html">
<a href="AttributeNumber.html">
AttributeNumber
</a>
</li>
<li class="chapter " data-level="2.6.7" data-path="AttributeObject.html">
<a href="AttributeObject.html">
AttributeObject
</a>
</li>
<li class="chapter " data-level="2.6.8" data-path="AttributeServerId.html">
<a href="AttributeServerId.html">
AttributeServerId
</a>
</li>
<li class="chapter " data-level="2.6.9" data-path="AttributeString.html">
<a href="AttributeString.html">
AttributeString
</a>
</li>
<li class="chapter " data-level="2.6.10" data-path="DatabaseStore.html">
<a href="DatabaseStore.html">
DatabaseStore
</a>
</li>
<li class="chapter " data-level="2.6.11" data-path="Matcher.html">
<a href="Matcher.html">
Matcher
</a>
</li>
<li class="chapter " data-level="2.6.12" data-path="ModelQuery.html">
<a href="ModelQuery.html">
ModelQuery
</a>
</li>
<li class="chapter " data-level="2.6.13" data-path="SortOrder.html">
<a href="SortOrder.html">
SortOrder
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.7" >
<span>
Drafts
</span>
<ul class="articles">
<li class="chapter " data-level="2.7.1" data-path="DraftChangeSet.html">
<a href="DraftChangeSet.html">
DraftChangeSet
</a>
</li>
<li class="chapter " data-level="2.7.2" data-path="DraftEditingSession.html">
<a href="DraftEditingSession.html">
DraftEditingSession
</a>
</li>
<li class="chapter " data-level="2.7.3" data-path="DraftStore.html">
<a href="DraftStore.html">
DraftStore
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.8" >
<span>
NylasEnv
</span>
<ul class="articles">
<li class="chapter " data-level="2.8.1" data-path="PackageManager.html">
<a href="PackageManager.html">
PackageManager
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="2.9" >
<span>
Atom
</span>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Contenteditable</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="contenteditable"><a name="contenteditable" class="plugin-anchor" href="#contenteditable"><i class="fa fa-link" aria-hidden="true"></i></a>Contenteditable</h1>
<h2 id="summary"><a name="summary" class="plugin-anchor" href="#summary"><i class="fa fa-link" aria-hidden="true"></i></a>Summary</h2>
<p>A modern React-compatible contenteditable</p>
<p>This <contenteditable> component is fully React-compatible and behaves
like a standard controlled input.</contenteditable></p>
<pre><code class="lang-javascript">getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> {value: <span class="hljs-string">&apos;&lt;strong&gt;Hello!&lt;/strong&gt;&apos;</span>};
},
handleChange: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>{
<span class="hljs-keyword">this</span>.setState({value: event.target.value});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> value = <span class="hljs-keyword">this</span>.state.value;
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Contenteditable</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.handleChange}</span> /&gt;</span>;
}
</span></code></pre>
<ul>
</ul>
<h3 id="instance-methods"><a name="instance-methods" class="plugin-anchor" href="#instance-methods"><i class="fa fa-link" aria-hidden="true"></i></a>Instance Methods</h3>
<h4 id="atomicEdit" class="function-name"><a name="atomicEdit" class="plugin-anchor" href="#atomicEdit"><i class="fa fa-link" aria-hidden="true"></i></a>
atomicEdit(<span class="args"><span class="arg">editingFunction</span></span>) <a href="#atomicEdit" class="link"></a>
</h4>
<div class="function-description markdown-from-sourecode">
<p>perform an editing operation on the Contenteditable
If the current selection at the time of running the extension is out of
scope, it will be set to the last saved state. This ensures extensions
operate on a valid {ExtendedSelection}.
Edits made within the editing function will eventually fire _onDOMMutated</p>
</div>
<p><strong>Parameters</strong></p>
<table class="arguments">
<tr>
<th>Argument</th>
<th>Description</th>
</tr>
<tr>
<td style="width:15%;">
<em>editingFunction</em>
</td>
<td class="markdown-from-sourecode">
A function to mutate the DOM and {ExtendedSelection}. It gets passed an {EditorAPI} object that contains mutating methods.
</td>
</tr>
</table>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="Config.html" class="navigation navigation-prev " aria-label="Previous page: Config">
<i class="fa fa-angle-left"></i>
</a>
<a href="KeyCommandsRegion.html" class="navigation navigation-next " aria-label="Next page: KeyCommandsRegion">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Contenteditable","level":"2.1.8","depth":2,"next":{"title":"KeyCommandsRegion","level":"2.1.9","depth":2,"path":"classes/KeyCommandsRegion.md","ref":"classes/KeyCommandsRegion.md","articles":[]},"previous":{"title":"Config","level":"2.1.7","depth":2,"path":"classes/Config.md","ref":"classes/Config.md","articles":[]},"dir":"ltr"},"config":{"plugins":["search","lunr","-fontsettings","-sharing","anchors","github","editlink","favicon"],"root":"./docs_src","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"editlink":{"label":"Edit This Page","multilingual":false,"base":"https://github.com/nylas/nylas-mail-docs/tree/master"},"github":{"url":"https://github.com/nylas/nylas-mail-docs"},"favicon":{"shortcut":"/img/favicon.png"},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"anchors":{},"highlight":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Nylas Mail Plugin SDK","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"3.2.2"},"file":{"path":"classes/Contenteditable.md","mtime":"2017-01-30T10:28:19.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-30T10:28:53.038Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-editlink/plugin.js"></script>
</body>
</html>