init

.idea/.gitignore

@@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/

.idea/Markdown2Html.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Markdown2Html.iml" filepath="$PROJECT_DIR$/.idea/Markdown2Html.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<http://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.

README.md

@@ -0,0 +1,18 @@
+<div align="center">
+<a href="https://md.luckday.cn">
+<img width="500" src="./screenshot.jpg"/>
+</a>
+</div>
+<h1 align="center">Markdown2Html</h1>
+
+## 简介
+
+Fork 自 [markdown2html](https://github.com/TaleAi/markdown2html)，略有调整。
+
+- 支持自定义样式的 Markdown 编辑器
+- 支持微信公众号、知乎和稀土掘金
+- 支持公式
+- 支持 html 转 markdwon
+- 支持导出 pdf 和 markdown
+- 在线使用：
+  - https://md.luckday.cn/

config/env.js

@@ -0,0 +1,93 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

@@ -0,0 +1,30 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      return `module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: (props) => ({
+          $$typeof: Symbol.for('react.element'),
+          type: 'svg',
+          ref: null,
+          key: null,
+          props: Object.assign({}, props, {
+            children: ${assetFilename}
+          })
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

config/paths.js

@@ -0,0 +1,84 @@
+"use strict";
+
+const path = require("path");
+const fs = require("fs");
+const url = require("url");
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
+
+const envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(inputPath, needsSlash) {
+  const hasSlash = inputPath.endsWith("/");
+  if (hasSlash && !needsSlash) {
+    return inputPath.substr(0, inputPath.length - 1);
+  } else if (!hasSlash && needsSlash) {
+    return `${inputPath}/`;
+  } else {
+    return inputPath;
+  }
+}
+
+const getPublicUrl = (appPackageJson) => envPublicUrl || require(appPackageJson).homepage;
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+  const publicUrl = getPublicUrl(appPackageJson);
+  const servedUrl = envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : "/");
+  return ensureSlash(servedUrl, true);
+}
+
+const moduleFileExtensions = [
+  "web.mjs",
+  "mjs",
+  "web.js",
+  "js",
+  "web.ts",
+  "ts",
+  "web.tsx",
+  "tsx",
+  "json",
+  "web.jsx",
+  "jsx",
+];
+
+// Resolve file paths in the same order as webpack
+const resolveModule = (resolveFn, filePath) => {
+  const extension = moduleFileExtensions.find((extension) => fs.existsSync(resolveFn(`${filePath}.${extension}`)));
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`);
+  }
+
+  return resolveFn(`${filePath}.js`);
+};
+
+// config after eject: we're in ./config/
+module.exports = {
+  dotenv: resolveApp(".env"),
+  appPath: resolveApp("."),
+  appBuild: resolveApp("build"),
+  appPublic: resolveApp("public"),
+  appHtml: resolveApp("public/index.html"),
+  appIndexJs: resolveModule(resolveApp, "src/index"),
+  appLib: resolveModule(resolveApp, "src/Lib"),
+  appPackageJson: resolveApp("package.json"),
+  appSrc: resolveApp("src"),
+  appTsConfig: resolveApp("tsconfig.json"),
+  yarnLockFile: resolveApp("yarn.lock"),
+  testsSetup: resolveModule(resolveApp, "src/setupTests"),
+  proxySetup: resolveApp("src/setupProxy.js"),
+  appNodeModules: resolveApp("node_modules"),
+  publicUrl: getPublicUrl(resolveApp("package.json")),
+  servedPath: getServedPath(resolveApp("package.json")),
+};
+
+module.exports.moduleFileExtensions = moduleFileExtensions;

config/webpack.config.js

@@ -0,0 +1,608 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const webpack = require("webpack");
+const resolve = require("resolve");
+const PnpWebpackPlugin = require("pnp-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
+const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const safePostCssParser = require("postcss-safe-parser");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
+const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
+const paths = require("./paths");
+const getClientEnvironment = require("./env");
+const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt");
+const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+  const isEnvDevelopment = webpackEnv === "development";
+  const isEnvProduction = webpackEnv === "production";
+
+  // Webpack uses `publicPath` to determine where the app is being served from.
+  // It requires a trailing slash, or the file assets will get an incorrect path.
+  // In development, we always serve from the root. This makes config easier.
+  const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && "/";
+  // Some apps do not use client-side routing with pushState.
+  // For these, "homepage" can be set to "." to enable relative asset paths.
+  const shouldUseRelativeAssetPaths = publicPath === "./";
+
+  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && "";
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(publicUrl);
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve("style-loader"),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        options: Object.assign({}, shouldUseRelativeAssetPaths ? {publicPath: "../../"} : undefined),
+      },
+      {
+        loader: require.resolve("css-loader"),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve("postcss-loader"),
+        options: {
+          // Necessary for external CSS imports to work
+          // https://github.com/facebook/create-react-app/issues/2677
+          ident: "postcss",
+          plugins: () => [
+            require("postcss-flexbugs-fixes"),
+            require("postcss-preset-env")({
+              autoprefixer: {
+                flexbox: "no-2009",
+              },
+              stage: 3,
+            }),
+          ],
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push({
+        loader: require.resolve(preProcessor),
+        options: {
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      });
+    }
+    return loaders;
+  };
+
+  return {
+    mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction ? (shouldUseSourceMap ? "source-map" : false) : isEnvDevelopment && "eval-source-map",
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: [
+      // Include an alternative client for WebpackDevServer. A client's job is to
+      // connect to WebpackDevServer by a socket and get notified about changes.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      isEnvDevelopment && require.resolve("react-dev-utils/webpackHotDevClient"),
+      // Finally, this is your app's code:
+      paths.appIndexJs,
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
+    ].filter(Boolean),
+    output: {
+      // The build folder.
+      path: isEnvProduction ? paths.appBuild : undefined,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction ? "static/js/[name].[chunkhash:8].js" : isEnvDevelopment && "static/js/bundle.js",
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? "static/js/[name].[chunkhash:8].chunk.js"
+        : isEnvDevelopment && "static/js/[name].chunk.js",
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      // We use "/" in development.
+      publicPath: publicPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/")
+        : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // we want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minfication steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending futher investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          // Use multi-process parallel running to improve the build speed
+          // Default number of concurrent runs: os.cpus().length - 1
+          parallel: true,
+          // Enable file caching
+          cache: true,
+          sourceMap: shouldUseSourceMap,
+        }),
+        // This is only used in production mode
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+                  // `inline: false` forces the sourcemap to be output into a
+                  // separate file
+                  inline: false,
+                  // `annotation: true` appends the sourceMappingURL to the end of
+                  // the css file, helping the browser find the sourcemap
+                  annotation: true,
+                }
+              : false,
+          },
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+        chunks: "all",
+        name: false,
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      runtimeChunk: true,
+    },
+    resolve: {
+      // This allows you to set a fallback for where Webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ["node_modules"].concat(
+        // It is guaranteed to exist because we tweak it in `env.js`
+        process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes("ts")),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        "react-native": "react-native-web",
+      },
+      plugins: [
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Disable require.ensure as it's not a standard language feature.
+        {parser: {requireEnsure: false}},
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve("url-loader"),
+              options: {
+                limit: 10000,
+                name: "static/media/[name].[hash:8].[ext]",
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              loader: require.resolve("babel-loader"),
+              options: {
+                customize: require.resolve("babel-preset-react-app/webpack-overrides"),
+
+                plugins: [
+                  [
+                    require.resolve("babel-plugin-named-asset-import"),
+                    {
+                      loaderMap: {
+                        svg: {
+                          ReactComponent: "@svgr/webpack?-svgo![path]",
+                        },
+                      },
+                    },
+                  ],
+                ],
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                cacheCompression: isEnvProduction,
+                compact: isEnvProduction,
+              },
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve("babel-loader"),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [[require.resolve("babel-preset-react-app/dependencies"), {helpers: true}]],
+                cacheDirectory: true,
+                cacheCompression: isEnvProduction,
+
+                // If an error happens in a package, it's possible to be
+                // because it was compiled. Thus, we don't want the browser
+                // debugger to show the original code. Instead, the code
+                // being evaluated would be much more helpful.
+                sourceMaps: false,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                modules: true,
+                getLocalIdent: getCSSModuleLocalIdent,
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                },
+                "sass-loader",
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  modules: true,
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+                "sass-loader",
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve("file-loader"),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx|md)$/, /\.html$/, /\.json$/],
+              options: {
+                name: "static/media/[name].[hash:8].[ext]",
+              },
+            },
+
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+
+            {
+              loader: require.resolve("raw-loader"),
+              test: /\.md/i,
+              include: path.resolve('./src/template')
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined,
+        ),
+      ),
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+      // In production, it will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      // In development, this will be an empty string.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // This is necessary to emit hot updates (currently CSS only):
+      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for Webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: "static/css/[name].[contenthash:8].css",
+          chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
+        }),
+      // Generate a manifest file which contains a mapping of all asset filenames
+      // to their corresponding output file so that tools can pick it up without
+      // having to parse `index.html`.
+      new ManifestPlugin({
+        fileName: "asset-manifest.json",
+        publicPath: publicPath,
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how Webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the Webpack build.
+      isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
+          clientsClaim: true,
+          skipWaiting: true,
+          exclude: [/\.map$/, /asset-manifest\.json$/],
+          importWorkboxFrom: 'local',
+          navigateFallback: publicUrl + '/index.html',
+          navigateFallbackBlacklist: [
+            // Exclude URLs starting with /_, as they're likely an API call
+            new RegExp("^/_"),
+            // Exclude URLs containing a dot, as they're likely a resource in
+            // public/ and not a SPA route
+            new RegExp("/[^/]+\\.[^/]+$"),
+          ],
+          runtimeCaching: [
+            // 配置路由请求缓存 对应 workbox.routing.registerRoute
+            {
+              urlPattern: /.*\.js/, // 匹配文件
+              handler: "networkFirst", // 网络优先
+            },
+            {
+              urlPattern: /.*\.css/,
+              handler: "staleWhileRevalidate", // 缓存优先同时后台更新
+              options: {
+                // 这里可以设置 cacheName 和添加插件
+                plugins: [
+                  {
+                    cacheableResponse: {
+                      statuses: [0, 200],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              urlPattern: /.*\.(png|jpg|jpeg|svg|gif)/,
+              handler: "cacheFirst", // 缓存优先
+              options: {
+                cacheName: 'images',
+                expiration: {
+                  maxAgeSeconds: 24 * 60 * 60, // 最长缓存时间,
+                  maxEntries: 50, // 最大缓存图片数量
+                },
+              },
+            },
+            {
+              urlPattern: /.*\.html/,
+              handler: "networkFirst",
+            },
+          ],
+        }),
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          typescript: resolve.sync("typescript", {
+            basedir: paths.appNodeModules,
+          }),
+          async: false,
+          checkSyntacticErrors: true,
+          tsconfig: paths.appTsConfig,
+          compilerOptions: {
+            module: "esnext",
+            moduleResolution: "node",
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: "preserve",
+          },
+          reportFiles: [
+            "**",
+            "!**/*.json",
+            "!**/__tests__/**",
+            "!**/?(*.)(spec|test).*",
+            "!**/src/setupProxy.*",
+            "!**/src/setupTests.*",
+          ],
+          watch: paths.appSrc,
+          silent: true,
+          formatter: typescriptFormatter,
+        }),
+    ].filter(Boolean),
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      module: "empty",
+      dgram: "empty",
+      dns: "mock",
+      fs: "empty",
+      net: "empty",
+      tls: "empty",
+      child_process: "empty",
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

config/webpack.config.lib.js

@@ -0,0 +1,566 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const webpack = require("webpack");
+const resolve = require("resolve");
+const PnpWebpackPlugin = require("pnp-webpack-plugin");
+const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const safePostCssParser = require("postcss-safe-parser");
+const ManifestPlugin = require("webpack-manifest-plugin");
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
+const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
+const getCSSModuleLocalIdent = require("react-dev-utils/getCSSModuleLocalIdent");
+const paths = require("./paths");
+const getClientEnvironment = require("./env");
+const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin-alt");
+const typescriptFormatter = require("react-dev-utils/typescriptFormatter");
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+  const isEnvDevelopment = webpackEnv === "development";
+  const isEnvProduction = webpackEnv === "production";
+
+  // Webpack uses `publicPath` to determine where the app is being served from.
+  // It requires a trailing slash, or the file assets will get an incorrect path.
+  // In development, we always serve from the root. This makes config easier.
+  const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && "/";
+  // Some apps do not use client-side routing with pushState.
+  // For these, "homepage" can be set to "." to enable relative asset paths.
+  const shouldUseRelativeAssetPaths = publicPath === "./";
+
+  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && "";
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(publicUrl);
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve("style-loader"),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        options: Object.assign({}, shouldUseRelativeAssetPaths ? {publicPath: "../../"} : undefined),
+      },
+      {
+        loader: require.resolve("css-loader"),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve("postcss-loader"),
+        options: {
+          // Necessary for external CSS imports to work
+          // https://github.com/facebook/create-react-app/issues/2677
+          ident: "postcss",
+          plugins: () => [
+            require("postcss-flexbugs-fixes"),
+            require("postcss-preset-env")({
+              autoprefixer: {
+                flexbox: "no-2009",
+              },
+              stage: 3,
+            }),
+          ],
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push({
+        loader: require.resolve(preProcessor),
+        options: {
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+        },
+      });
+    }
+    return loaders;
+  };
+
+  return {
+    mode: isEnvProduction ? "production" : isEnvDevelopment && "development",
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction ? (shouldUseSourceMap ? "source-map" : false) : isEnvDevelopment && "eval-source-map",
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: [
+      // Include an alternative client for WebpackDevServer. A client's job is to
+      // connect to WebpackDevServer by a socket and get notified about changes.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      isEnvDevelopment && require.resolve("react-dev-utils/webpackHotDevClient"),
+      // Finally, this is your app's code:
+      paths.appLib,
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
+    ].filter(Boolean),
+    output: {
+      // The build folder.
+      path: isEnvProduction ? paths.appBuild : undefined,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction ? "static/js/[name].[chunkhash:8].js" : isEnvDevelopment && "static/js/bundle.js",
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? "static/js/[name].[chunkhash:8].chunk.js"
+        : isEnvDevelopment && "static/js/[name].chunk.js",
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      // We use "/" in development.
+      publicPath: publicPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? (info) => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, "/")
+        : isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")),
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // we want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minfication steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending futher investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          // Use multi-process parallel running to improve the build speed
+          // Default number of concurrent runs: os.cpus().length - 1
+          parallel: true,
+          // Enable file caching
+          cache: true,
+          sourceMap: shouldUseSourceMap,
+        }),
+        // This is only used in production mode
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+                  // `inline: false` forces the sourcemap to be output into a
+                  // separate file
+                  inline: false,
+                  // `annotation: true` appends the sourceMappingURL to the end of
+                  // the css file, helping the browser find the sourcemap
+                  annotation: true,
+                }
+              : false,
+          },
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+        chunks: "all",
+        name: false,
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      runtimeChunk: true,
+    },
+    resolve: {
+      // This allows you to set a fallback for where Webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ["node_modules"].concat(
+        // It is guaranteed to exist because we tweak it in `env.js`
+        process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map((ext) => `.${ext}`)
+        .filter((ext) => useTypeScript || !ext.includes("ts")),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        "react-native": "react-native-web",
+      },
+      plugins: [
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Disable require.ensure as it's not a standard language feature.
+        {parser: {requireEnsure: false}},
+
+        // First, run the linter.
+        // It's important to do this before Babel processes the JS.
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve("url-loader"),
+              options: {
+                limit: 10000,
+                name: "static/media/[name].[hash:8].[ext]",
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              use: [
+                "thread-loader",
+                {
+                  loader: require.resolve("babel-loader"),
+                  options: {
+                    customize: require.resolve("babel-preset-react-app/webpack-overrides"),
+                    plugins: [
+                      [
+                        require.resolve("babel-plugin-named-asset-import"),
+                        {
+                          loaderMap: {
+                            svg: {
+                              ReactComponent: "@svgr/webpack?-svgo![path]",
+                            },
+                          },
+                        },
+                      ],
+                    ],
+                    cacheDirectory: true,
+                    cacheCompression: isEnvProduction,
+                    compact: isEnvProduction,
+                  },
+                },
+              ],
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              use: [
+                "thread-loader",
+                {
+                  loader: require.resolve("babel-loader"),
+                  options: {
+                    babelrc: false,
+                    configFile: false,
+                    compact: false,
+                    presets: [[require.resolve("babel-preset-react-app/dependencies"), {helpers: true}]],
+                    cacheDirectory: true,
+                    cacheCompression: isEnvProduction,
+                    sourceMaps: false,
+                  },
+                },
+              ],
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                modules: true,
+                getLocalIdent: getCSSModuleLocalIdent,
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                },
+                "sass-loader",
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 2,
+                  sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+                  modules: true,
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+                "sass-loader",
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve("file-loader"),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              options: {
+                name: "static/media/[name].[hash:8].[ext]",
+              },
+            },
+
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ],
+    },
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      // new HtmlWebpackPlugin(
+      //   Object.assign(
+      //     {},
+      //     {
+      //       inject: true,
+      //       template: paths.appHtml,
+      //     },
+      //     isEnvProduction
+      //       ? {
+      //           minify: {
+      //             removeComments: true,
+      //             collapseWhitespace: true,
+      //             removeRedundantAttributes: true,
+      //             useShortDoctype: true,
+      //             removeEmptyAttributes: true,
+      //             removeStyleLinkTypeAttributes: true,
+      //             keepClosingSlash: true,
+      //             minifyJS: true,
+      //             minifyCSS: true,
+      //             minifyURLs: true,
+      //           },
+      //         }
+      //       : undefined,
+      //   ),
+      // ),
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      // isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+      // In production, it will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      // In development, this will be an empty string.
+      // new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // This is necessary to emit hot updates (currently CSS only):
+      // isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for Webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: "static/css/[name].[contenthash:8].css",
+          chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
+        }),
+      // Generate a manifest file which contains a mapping of all asset filenames
+      // to their corresponding output file so that tools can pick it up without
+      // having to parse `index.html`.
+      new ManifestPlugin({
+        fileName: "asset-manifest.json",
+        publicPath: publicPath,
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how Webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the Webpack build.
+      isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
+          clientsClaim: true,
+          exclude: [/\.map$/, /asset-manifest\.json$/],
+          importWorkboxFrom: "cdn",
+          navigateFallback: publicUrl + "/index.html",
+          navigateFallbackBlacklist: [
+            // Exclude URLs starting with /_, as they're likely an API call
+            new RegExp("^/_"),
+            // Exclude URLs containing a dot, as they're likely a resource in
+            // public/ and not a SPA route
+            new RegExp("/[^/]+\\.[^/]+$"),
+          ],
+        }),
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          typescript: resolve.sync("typescript", {
+            basedir: paths.appNodeModules,
+          }),
+          async: false,
+          checkSyntacticErrors: true,
+          tsconfig: paths.appTsConfig,
+          compilerOptions: {
+            module: "esnext",
+            moduleResolution: "node",
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: "preserve",
+          },
+          reportFiles: [
+            "**",
+            "!**/*.json",
+            "!**/__tests__/**",
+            "!**/?(*.)(spec|test).*",
+            "!**/src/setupProxy.*",
+            "!**/src/setupTests.*",
+          ],
+          watch: paths.appSrc,
+          silent: true,
+          formatter: typescriptFormatter,
+        }),
+    ].filter(Boolean),
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      module: "empty",
+      dgram: "empty",
+      dns: "mock",
+      fs: "empty",
+      net: "empty",
+      tls: "empty",
+      child_process: "empty",
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

config/webpackDevServer.config.js

@@ -0,0 +1,104 @@
+'use strict';
+
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const paths = require('./paths');
+const fs = require('fs');
+
+const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+const host = process.env.HOST || '0.0.0.0';
+
+module.exports = function(proxy, allowedHost) {
+  return {
+    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
+    // websites from potentially accessing local content through DNS rebinding:
+    // https://github.com/webpack/webpack-dev-server/issues/887
+    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
+    // However, it made several existing use cases such as development in cloud
+    // environment or subdomains in development significantly more complicated:
+    // https://github.com/facebook/create-react-app/issues/2271
+    // https://github.com/facebook/create-react-app/issues/2233
+    // While we're investigating better solutions, for now we will take a
+    // compromise. Since our WDS configuration only serves files in the `public`
+    // folder we won't consider accessing them a vulnerability. However, if you
+    // use the `proxy` feature, it gets more dangerous because it can expose
+    // remote code execution vulnerabilities in backends like Django and Rails.
+    // So we will disable the host check normally, but enable it if you have
+    // specified the `proxy` setting. Finally, we let you override it if you
+    // really know what you're doing with a special environment variable.
+    disableHostCheck:
+      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // Enable gzip compression of generated files.
+    compress: true,
+    // Silence WebpackDevServer's own logs since they're generally not useful.
+    // It will still show compile warnings and errors with this setting.
+    clientLogLevel: 'none',
+    // By default WebpackDevServer serves physical files from current directory
+    // in addition to all the virtual build products that it serves from memory.
+    // This is confusing because those files won’t automatically be available in
+    // production build folder unless we copy them. However, copying the whole
+    // project directory is dangerous because we may expose sensitive files.
+    // Instead, we establish a convention that only files in `public` directory
+    // get served. Our build script will copy `public` into the `build` folder.
+    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+    // Note that we only recommend to use `public` folder as an escape hatch
+    // for files like `favicon.ico`, `manifest.json`, and libraries that are
+    // for some reason broken when imported through Webpack. If you just want to
+    // use an image, put it in `src` and `import` it from JavaScript instead.
+    contentBase: paths.appPublic,
+    // By default files from `contentBase` will not trigger a page reload.
+    watchContentBase: true,
+    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+    // for the WebpackDevServer client so it can learn when the files were
+    // updated. The WebpackDevServer client is included as an entry point
+    // in the Webpack development configuration. Note that only changes
+    // to CSS are currently hot reloaded. JS changes will refresh the browser.
+    hot: true,
+    // It is important to tell WebpackDevServer to use the same "root" path
+    // as we specified in the config. In development, we always serve from /.
+    publicPath: '/',
+    // WebpackDevServer is noisy by default so we emit custom message instead
+    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
+    quiet: true,
+    // Reportedly, this avoids CPU overload on some systems.
+    // https://github.com/facebook/create-react-app/issues/293
+    // src/node_modules is not ignored to support absolute imports
+    // https://github.com/facebook/create-react-app/issues/1065
+    watchOptions: {
+      ignored: ignoredFiles(paths.appSrc),
+    },
+    // Enable HTTPS if the HTTPS environment variable is set to 'true'
+    https: protocol === 'https',
+    host,
+    overlay: false,
+    historyApiFallback: {
+      // Paths with dots should still use the history fallback.
+      // See https://github.com/facebook/create-react-app/issues/387.
+      disableDotRule: true,
+    },
+    public: allowedHost,
+    proxy,
+    before(app, server) {
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(app);
+      }
+
+      // This lets us fetch source contents from webpack for the error overlay
+      app.use(evalSourceMapMiddleware(server));
+      // This lets us open files from the runtime error overlay.
+      app.use(errorOverlayMiddleware());
+
+      // This service worker file is effectively a 'no-op' that will reset any
+      // previous service worker registered for the same host:port combination.
+      // We do this in development to avoid hitting the production cache if
+      // it used the same host and port.
+      // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
+      app.use(noopServiceWorkerMiddleware());
+    },
+  };
+};

main.js

@@ -0,0 +1,49 @@
+// 引入electron并创建一个Browserwindow
+const {app, BrowserWindow} = require('electron')
+const path = require('path')
+const url = require('url')
+
+// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
+let mainWindow
+
+function createWindow () {
+//创建浏览器窗口,宽高自定义具体大小你开心就好
+mainWindow = new BrowserWindow({width: 800, height: 600})
+
+  // 加载应用----react 打包
+  mainWindow.loadURL(url.format({
+    pathname: path.join(__dirname, './build/index.html'),
+    protocol: 'file:',
+    slashes: true
+  }))
+  // 加载应用----适用于 react 开发时项目
+  // mainWindow.loadURL('http://localhost:3000/');
+  
+  // 打开开发者工具，默认不打开
+  // mainWindow.webContents.openDevTools()
+
+  // 关闭window时触发下列事件.
+  mainWindow.on('closed', function () {
+    mainWindow = null
+  })
+}
+
+// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
+app.on('ready', createWindow)
+
+// 所有窗口关闭时退出应用.
+app.on('window-all-closed', function () {
+  // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+   // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// 你可以在这个脚本中续写或者使用require引入独立的js文件.

package.json

@@ -0,0 +1,242 @@
+{
+  "name": "markdown2wechat",
+  "author": "tale",
+  "description": "a markdown editor with the function of style edition",
+  "version": "1.0.0",
+  "private": false,
+  "main": "lib/Lib.js",
+  "module": "lib/Lib.js",
+  "homepage": "http://md.aizhuanqian.online",
+  "license": "GPL-3.0",
+  "typings": "./lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TaleAi/markdown2html"
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "watch": "node ./watch.js",
+    "build": "export GENERATE_SOURCEMAP=false&&node --max_old_space_size=4096 scripts/build.js",
+    "test": "node scripts/test.js",
+    "analyze": "source-map-explorer build/static/js/*.js",
+    "lint": "eslint src --ext ts,tsx,js --fix",
+    "publish:npm": "cross-env NODE_ENV=production && rm -rf lib && mkdir lib && cross-env BABEL_ENV=production npx babel src --out-dir lib --copy-files",
+    "storybook": "npm run publish:npm && start-storybook -p 9001 -c .storybook"
+  },
+  "dependencies": {
+    "@sitdown/juejin": "^1.1.1",
+    "@sitdown/wechat": "^1.1.4",
+    "@sitdown/zhihu": "^1.1.2",
+    "@uiw/react-codemirror": "^1.0.28",
+    "ali-oss": "^6.1.1",
+    "antd": "^3.15.1",
+    "axios": "^0.18.0",
+    "diff-match-patch": "^1.0.4",
+    "highlight.js": "^9.15.6",
+    "juice": "^5.2.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
+    "markdown-it": "^8.4.2",
+    "markdown-it-deflist": "^2.0.3",
+    "markdown-it-footnote": "^3.0.1",
+    "markdown-it-implicit-figures": "^0.9.0",
+    "markdown-it-imsize": "^2.0.1",
+    "markdown-it-katex": "^2.0.3",
+    "markdown-it-ruby": "^0.1.1",
+    "markdown-it-table-of-contents": "^0.4.4",
+    "mathjax": "^3.0.1",
+    "mobx": "^5.9.0",
+    "mobx-react": "^5.4.3",
+    "prettier": "^1.19.1",
+    "qiniu-js": "^2.5.4",
+    "react": "16.10.2",
+    "react-dom": "16.10.2",
+    "react-helmet": "^5.2.1",
+    "sitdown": "^1.1.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.6.2",
+    "@babel/core": "7.2.2",
+    "@storybook/react": "^4.1.11",
+    "@svgr/webpack": "^4.1.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
+    "babel-jest": "23.6.0",
+    "babel-loader": "8.0.5",
+    "babel-plugin-inline-import": "^3.0.0",
+    "babel-plugin-named-asset-import": "^0.3.1",
+    "babel-preset-react-app": "^7.0.1",
+    "bfj": "6.1.1",
+    "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "chalk": "^2.4.2",
+    "chokidar": "^3.2.1",
+    "cross-env": "^6.0.3",
+    "css-loader": "^2.1.1",
+    "dotenv": "6.0.0",
+    "dotenv-expand": "4.2.0",
+    "eslint": "^6.5.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-config-react-app": "^3.0.7",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.12.4",
+    "file-loader": "2.0.0",
+    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
+    "fs-extra": "7.0.1",
+    "html-webpack-plugin": "4.0.0-alpha.2",
+    "husky": "^3.0.7",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "23.6.0",
+    "jest-pnp-resolver": "1.0.2",
+    "jest-resolve": "23.6.0",
+    "jest-watch-typeahead": "^0.2.1",
+    "lint-staged": "^9.4.0",
+    "mini-css-extract-plugin": "0.5.0",
+    "optimize-css-assets-webpack-plugin": "5.0.1",
+    "pnp-webpack-plugin": "1.2.1",
+    "postcss-flexbugs-fixes": "4.1.0",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "6.5.0",
+    "postcss-safe-parser": "4.0.1",
+    "pretty-quick": "^1.11.1",
+    "raw-loader": "^4.0.0",
+    "react-app-polyfill": "^0.2.1",
+    "react-dev-utils": "^7.0.3",
+    "resolve": "1.10.0",
+    "sass-loader": "7.1.0",
+    "shelljs": "^0.8.3",
+    "source-map-explorer": "^2.0.1",
+    "style-loader": "0.23.1",
+    "styled-jsx": "^3.2.1",
+    "terser-webpack-plugin": "1.2.2",
+    "thread-loader": "^2.1.3",
+    "to-string-loader": "^1.1.5",
+    "url-loader": "1.1.2",
+    "webpack": "4.28.3",
+    "webpack-dev-server": "3.1.14",
+    "webpack-manifest-plugin": "2.0.4",
+    "workbox-webpack-plugin": "3.6.3"
+  },
+  "build": {
+    "productName": "Markdown2Html",
+    "appId": "com.aizhuanqian.www",
+    "mac": {
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "win": {
+      "target": [
+        "nsis",
+        "zip"
+      ]
+    },
+    "files": [
+      "build",
+      "main.js",
+      "package.json"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts"
+    ],
+    "resolver": "jest-pnp-resolver",
+    "setupFiles": [
+      "react-app-polyfill/jsdom"
+    ],
+    "testMatch": [
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
+    ],
+    "testEnvironment": "jsdom",
+    "testURL": "http://localhost",
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    },
+    "transformIgnorePatterns": [
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
+    ],
+    "moduleNameMapper": {
+      "^react-native$": "react-native-web",
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+    },
+    "moduleFileExtensions": [
+      "web.js",
+      "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
+      "json",
+      "web.jsx",
+      "jsx",
+      "node"
+    ],
+    "watchPlugins": []
+  },
+  "babel": {
+    "presets": [
+      "@babel/react"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-decorators",
+        {
+          "legacy": true
+        }
+      ],
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ]
+    ],
+    "env": {
+      "production": {
+        "plugins": [
+          [
+            "babel-plugin-inline-import",
+            {
+              "extensions": [
+                ".md"
+              ]
+            }
+          ]
+        ]
+      }
+    }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{jsx,txs,ts,js,json}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}

public/favicon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1" width="400" height="400" style="">
+    <rect width="100%" height="100%" fill="black" rx="20%" ry="20%" />
+    <g fill="#ffffff" transform="translate(300, 100)">
+        <g transform="scale(16)">
+            <svg filter="url(#colors2300178586)" x="0" y="0" width="27.442663140478597" height="50">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.47 31.83">
+                    <g fill="#ffffff">
+                        <path d="M0 31.83V0h.81v31.02h16.66v.81H0z"/>
+                        <path d="M6.69 26.11V0h3.24v22.87h7.54v3.24H6.69z"/>
+                    </g>
+                </svg>
+            </svg>
+        </g>
+    </g>
+
+</svg>

public/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="keywords" content="markdown,微信公众号,微信公众号编辑器,markdown转微信公众号,微信公众号markdown" />
+
+  <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+
+  <title>Markdown2Html</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  <script>
+    var _hmt = _hmt || [];
+    (function () {
+      var hm = document.createElement("script");
+      hm.src = "https://hm.baidu.com/hm.js?897783afa3c6079cf0ac98fe04e7ead7";
+      var s = document.getElementsByTagName("script")[0];
+      s.parentNode.insertBefore(hm, s);
+    })();
+  </script>
+</body>
+
+</html>

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "short_name": "Markdown Nice",
+  "name": "Markdown Nice",
+  "icons": [
+    {
+      "src": "https://my-wechat.mdnice.com/mdnice/mdnice%20logo_20191007150129.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "https://my-wechat.mdnice.com/mdnice/mdnice%20logo_20191007150129.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

scripts/build.js

@@ -0,0 +1,192 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const fs = require('fs-extra');
+const webpack = require('webpack');
+const bfj = require('bfj');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Process CLI arguments
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
+// Generate configuration
+const config = configFactory('production');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrl;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      console.log(chalk.red('Failed to compile.\n'));
+      printBuildError(err);
+      process.exit(1);
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  let compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+        messages = formatWebpackMessages({
+          errors: [err.message],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        console.log(
+          chalk.yellow(
+            '\nTreating warnings as errors because process.env.CI = true.\n' +
+              'Most CI servers set it automatically.\n'
+          )
+        );
+        return reject(new Error(messages.warnings.join('\n\n')));
+      }
+
+      const resolveArgs = {
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      };
+      if (writeStatsJson) {
+        return bfj
+          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch(error => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

scripts/start.js

@@ -0,0 +1,117 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const fs = require('fs');
+const chalk = require('react-dev-utils/chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const paths = require('../config/paths');
+const configFactory = require('../config/webpack.config');
+const createDevServerConfig = require('../config/webpackDevServer.config');
+
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
+const HOST = process.env.HOST || '0.0.0.0';
+
+if (process.env.HOST) {
+  console.log(
+    chalk.cyan(
+      `Attempting to bind to HOST environment variable: ${chalk.yellow(
+        chalk.bold(process.env.HOST)
+      )}`
+    )
+  );
+  console.log(
+    `If this was unintentional, check that you haven't mistakenly set it in your shell.`
+  );
+  console.log(
+    `Learn more here: ${chalk.yellow('http://bit.ly/CRA-advanced-config')}`
+  );
+  console.log();
+}
+
+// We require that you explictly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // We attempt to use the default port but if it is busy, we offer the user to
+    // run on a different port. `choosePort()` Promise resolves to the next free port.
+    return choosePort(HOST, DEFAULT_PORT);
+  })
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+    const config = configFactory('development');
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const urls = prepareUrls(protocol, HOST, port);
+    // Create a webpack compiler that is configured with custom messages.
+    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    // Serve webpack assets generated by the compiler over a web server.
+    const serverConfig = createDevServerConfig(
+      proxyConfig,
+      urls.lanUrlForConfig
+    );
+    const devServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    devServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+      console.log(chalk.cyan('Starting the development server...\n'));
+      openBrowser(urls.localUrlForBrowser);
+    });
+
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
+        devServer.close();
+        process.exit();
+      });
+    });
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

scripts/test.js

@@ -0,0 +1,60 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'test';
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+
+const jest = require('jest');
+const execSync = require('child_process').execSync;
+let argv = process.argv.slice(2);
+
+function isInGitRepository() {
+  try {
+    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function isInMercurialRepository() {
+  try {
+    execSync('hg --cwd . root', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+// Watch unless on CI, in coverage mode, explicitly adding `--no-watch`,
+// or explicitly running all tests
+if (
+  !process.env.CI &&
+  argv.indexOf('--coverage') === -1 &&
+  argv.indexOf('--no-watch') === -1 &&
+  argv.indexOf('--watchAll') === -1
+) {
+  // https://github.com/facebook/create-react-app/issues/5210
+  const hasSourceControl = isInGitRepository() || isInMercurialRepository();
+  argv.push(hasSourceControl ? '--watch' : '--watchAll');
+}
+
+// Jest doesn't have this option so we'll remove it
+if (argv.indexOf('--no-watch') !== -1) {
+  argv = argv.filter(arg => arg !== '--no-watch');
+}
+
+
+jest.run(argv);

src/App.css

@@ -0,0 +1,210 @@
+.ant-btn-primary {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+.ant-btn:hover, .ant-btn:focus {
+  color: #000;
+  background-color: #fff;
+  border-color: #000;
+}
+
+.ant-input:hover, .ant-input:focus {
+  border-color: #000;
+  border-right-width: 1px !important;
+  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+}
+
+.ant-select-selection:hover {
+  border-color: #000;
+  border-right-width: 1px !important;
+}
+
+.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active,
+.ant-input-number:focus, .ant-input-number:active , .ant-input-number:hover {
+  border-color: #000;
+  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+}
+
+.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
+  background-color: #f1f1f1;
+}
+
+.ant-select-dropdown-menu {
+  margin: 4px;
+  padding: 0;
+}
+
+.ant-select-dropdown-menu-item {
+  border-radius: 4px;
+  margin: 2px 0;
+}
+
+.ant-menu-item-selected {
+  color: #000;
+  /*font-weight: bolder;*/
+}
+
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: #f6f6f6;
+}
+
+.ant-menu-item {
+  text-align: center;
+  margin-right: 20px;
+}
+
+.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+  margin-right: 20px;
+}
+
+.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
+  color: #000;
+  font-weight: bolder;
+}
+
+.nice-app {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serifhtml, body;
+  font-size: 16px;
+}
+
+.nice-text-container {
+  display: flex;
+  height: calc(100vh - 50px);
+  width: 100%;
+}
+
+.nice-text-container-immersive {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.nice-md-editing-immersive {
+  padding: 0px;
+  width: 100%;
+}
+
+.nice-md-editing-immersive .CodeMirror-lines {
+  padding: 20px;
+}
+
+@media screen and (min-width: 768px) {
+  .nice-md-editing-immersive .CodeMirror-lines {
+    padding: 20px 10%;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .nice-md-editing-immersive .CodeMirror-lines {
+    padding: 20px 15%;
+  }
+}
+
+/* 编辑器最多会被分成三份width:33.3%，当两份时根据flex-grow:1伸展 */
+.nice-md-editing,
+.nice-style-editing {
+  position: relative;
+  width: 33.3%;
+  height: 88%;
+  flex-grow: 1;
+  word-wrap: break-word;
+  z-index: 1;
+}
+
+.nice-marked-text {
+  display: flex;
+  justify-content: center;
+  width: 33.3%;
+  flex-grow: 1;
+  padding: 20px;
+  margin-bottom: 70px;
+  word-wrap: break-word;
+  position: relative;
+}
+
+.nice-marked-text-pc {
+  padding: 0;
+}
+
+.nice-wx-box {
+  overflow-y: auto;
+  padding: 25px 20px;
+  height: 98%;
+  width: 375px;
+  box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
+}
+
+.nice-wx-box-pc {
+  width: 100%;
+  padding: 20px 35px 20px 20px;
+  box-shadow: none;
+}
+
+.nice-style-editing-hide {
+  display: none;
+}
+
+.nice-md-editing-hide {
+  display: none;
+}
+
+.nice-marked-text-hide {
+  display: none;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.06);
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+@media print {
+  .nice-md-editing {
+    display: none;
+  }
+  .nice-navbar {
+    display: none;
+  }
+  .nice-sidebar {
+    display: none;
+  }
+  .nice-wx-box {
+    overflow: visible;
+    box-shadow: none;
+    width: 100%;
+  }
+  .nice-style-editing {
+    display: none;
+  }
+  #nice-rich-text {
+    padding: 0 !important;
+  }
+  .nice-footer-container {
+    display: none;
+  }
+}

src/App.js

@@ -0,0 +1,410 @@
+import React, {Component} from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import "codemirror/addon/search/searchcursor";
+import "codemirror/keymap/sublime";
+import "antd/dist/antd.css";
+import {observer, inject} from "mobx-react";
+import classnames from "classnames";
+import throttle from "lodash.throttle";
+
+import Dialog from "./layout/Dialog";
+import Navbar from "./layout/Navbar";
+import Toobar from "./layout/Toolbar";
+import Footer from "./layout/Footer";
+import Sidebar from "./layout/Sidebar";
+import StyleEditor from "./layout/StyleEditor";
+import EditorMenu from "./layout/EditorMenu";
+import SearchBox from "./component/SearchBox";
+
+import "./App.css";
+import "./utils/mdMirror.css";
+
+import {
+  LAYOUT_ID,
+  BOX_ID,
+  IMAGE_HOSTING_NAMES,
+  IMAGE_HOSTING_TYPE,
+  MJX_DATA_FORMULA,
+  MJX_DATA_FORMULA_TYPE,
+} from "./utils/constant";
+import {markdownParser, markdownParserWechat, updateMathjax} from "./utils/helper";
+import pluginCenter from "./utils/pluginCenter";
+import appContext from "./utils/appContext";
+import {uploadAdaptor} from "./utils/imageHosting";
+import bindHotkeys, {betterTab, rightClick} from "./utils/hotkey";
+
+@inject("content")
+@inject("navbar")
+@inject("footer")
+@inject("view")
+@inject("dialog")
+@inject("imageHosting")
+@observer
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.scale = 1;
+    this.handleUpdateMathjax = throttle(updateMathjax, 1500);
+    this.state = {
+      focus: false,
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener("fullscreenchange", this.solveScreenChange);
+    document.addEventListener("webkitfullscreenchange", this.solveScreenChange);
+    document.addEventListener("mozfullscreenchange", this.solveScreenChange);
+    document.addEventListener("MSFullscreenChange", this.solveScreenChange);
+    try {
+      window.MathJax = {
+        tex: {
+          inlineMath: [["$", "$"]],
+          displayMath: [["$$", "$$"]],
+          tags: "ams",
+        },
+        svg: {
+          fontCache: "none",
+        },
+        options: {
+          renderActions: {
+            addMenu: [0, "", ""],
+            addContainer: [
+              190,
+              (doc) => {
+                for (const math of doc.math) {
+                  this.addContainer(math, doc);
+                }
+              },
+              this.addContainer,
+            ],
+          },
+        },
+      };
+      // eslint-disable-next-line
+      require("mathjax/es5/tex-svg-full");
+      pluginCenter.mathjax = true;
+    } catch (e) {
+      console.log(e);
+    }
+    this.setEditorContent();
+    this.setCustomImageHosting();
+  }
+
+  componentDidUpdate() {
+    if (pluginCenter.mathjax) {
+      this.handleUpdateMathjax();
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("fullscreenchange", this.solveScreenChange);
+    document.removeEventListener("webkitfullscreenchange", this.solveScreenChange);
+    document.removeEventListener("mozfullscreenchange", this.solveScreenChange);
+    document.removeEventListener("MSFullscreenChange", this.solveScreenChange);
+  }
+
+  setCustomImageHosting = () => {
+    if (this.props.useImageHosting === undefined) {
+      return;
+    }
+    const {url, name, isSmmsOpen, isQiniuyunOpen, isAliyunOpen, isGiteeOpen, isGitHubOpen} = this.props.useImageHosting;
+    if (name) {
+      this.props.imageHosting.setHostingUrl(url);
+      this.props.imageHosting.setHostingName(name);
+      this.props.imageHosting.addImageHosting(name);
+    }
+    if (isSmmsOpen) {
+      this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.smms);
+    }
+    if (isAliyunOpen) {
+      this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.aliyun);
+    }
+    if (isQiniuyunOpen) {
+      this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.qiniuyun);
+    }
+    if (isGiteeOpen) {
+      this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.gitee);
+    }
+    if (isGitHubOpen) {
+      this.props.imageHosting.addImageHosting(IMAGE_HOSTING_NAMES.github);
+    }
+
+    // 第一次进入没有默认图床时
+    if (window.localStorage.getItem(IMAGE_HOSTING_TYPE) === null) {
+      let type;
+      if (name) {
+        type = name;
+      } else if (isSmmsOpen) {
+        type = IMAGE_HOSTING_NAMES.smms;
+      } else if (isAliyunOpen) {
+        type = IMAGE_HOSTING_NAMES.aliyun;
+      } else if (isQiniuyunOpen) {
+        type = IMAGE_HOSTING_NAMES.qiniuyun;
+      } else if (isGiteeOpen) {
+        type = IMAGE_HOSTING_NAMES.isGitee;
+      }
+      this.props.imageHosting.setType(type);
+      window.localStorage.setItem(IMAGE_HOSTING_TYPE, type);
+    }
+  };
+
+  setEditorContent = () => {
+    const {defaultText} = this.props;
+    if (defaultText) {
+      this.props.content.setContent(defaultText);
+    }
+  };
+
+  setCurrentIndex(index) {
+    this.index = index;
+  }
+
+  solveScreenChange = () => {
+    const {isImmersiveEditing} = this.props.view;
+    this.props.view.setImmersiveEditing(!isImmersiveEditing);
+  };
+
+  getInstance = (instance) => {
+    instance.editor.on("inputRead", function(cm, event) {
+      if (event.origin === "paste") {
+        var text = event.text[0]; // pasted string
+        var new_text = ""; // any operations here
+        cm.refresh();
+        const {length} = cm.getSelections();
+        // my first idea was
+        // note: for multiline strings may need more complex calculations
+        cm.replaceRange(new_text, event.from, {line: event.from.line, ch: event.from.ch + text.length});
+        // first solution did'nt work (before i guess to call refresh) so i tried that way, works too
+        if (length === 1) {
+          cm.execCommand("undo");
+        }
+        // cm.setCursor(event.from);
+        cm.replaceSelection(new_text);
+      }
+    });
+    if (instance) {
+      this.props.content.setMarkdownEditor(instance.editor);
+    }
+  };
+
+  handleScroll = () => {
+    if (this.props.navbar.isSyncScroll) {
+      const {markdownEditor} = this.props.content;
+      const cmData = markdownEditor.getScrollInfo();
+      const editorToTop = cmData.top;
+      const editorScrollHeight = cmData.height - cmData.clientHeight;
+      this.scale = (this.previewWrap.offsetHeight - this.previewContainer.offsetHeight + 55) / editorScrollHeight;
+      if (this.index === 1) {
+        this.previewContainer.scrollTop = editorToTop * this.scale;
+      } else {
+        this.editorTop = this.previewContainer.scrollTop / this.scale;
+        markdownEditor.scrollTo(null, this.editorTop);
+      }
+    }
+  };
+
+  handleChange = (editor) => {
+    if (this.state.focus) {
+      const content = editor.getValue();
+      this.props.content.setContent(content);
+      this.props.onTextChange && this.props.onTextChange(content);
+    }
+  };
+
+  handleFocus = (editor) => {
+    this.setState({
+      focus: true,
+    });
+    this.props.onTextFocus && this.props.onTextFocus(editor.getValue());
+  };
+
+  handleBlur = (editor) => {
+    this.setState({
+      focus: false,
+    });
+    this.props.onTextBlur && this.props.onTextBlur(editor.getValue());
+  };
+
+  getStyleInstance = (instance) => {
+    if (instance) {
+      this.styleEditor = instance.editor;
+      this.styleEditor.on("keyup", (cm, e) => {
+        if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
+          cm.showHint(e);
+        }
+      });
+    }
+  };
+
+  handleDrop = (instance, e) => {
+    // e.preventDefault();
+    // console.log(e.dataTransfer.files[0]);
+    if (!(e.dataTransfer && e.dataTransfer.files)) {
+      return;
+    }
+    for (let i = 0; i < e.dataTransfer.files.length; i++) {
+      // console.log(e.dataTransfer.files[i]);
+      uploadAdaptor({file: e.dataTransfer.files[i], content: this.props.content});
+    }
+  };
+
+  handlePaste = (instance, e) => {
+    const cbData = e.clipboardData;
+
+    const insertPasteContent = (cm, content) => {
+      const {length} = cm.getSelections();
+      cm.replaceSelections(Array(length).fill(content));
+      this.setState(
+        {
+          focus: true,
+        },
+        () => {
+          this.handleChange(cm);
+        },
+      );
+    };
+
+    if (e.clipboardData && e.clipboardData.files) {
+      for (let i = 0; i < e.clipboardData.files.length; i++) {
+        uploadAdaptor({file: e.clipboardData.files[i], content: this.props.content});
+      }
+    }
+
+    if (cbData) {
+      const html = cbData.getData("text/html");
+      const text = cbData.getData("TEXT");
+      insertPasteContent(instance, text);
+      console.log(html);
+
+      if (html) {
+        console.log("htmsdkskdkskdk");
+        this.props.footer.setPasteHtmlChecked(true);
+        this.props.footer.setPasteHtml(html);
+        this.props.footer.setPasteText(text);
+      } else {
+        this.props.footer.setPasteHtmlChecked(false);
+      }
+    }
+  };
+
+  addContainer(math, doc) {
+    const tag = "span";
+    const spanClass = math.display ? "span-block-equation" : "span-inline-equation";
+    const cls = math.display ? "block-equation" : "inline-equation";
+    math.typesetRoot.className = cls;
+    math.typesetRoot.setAttribute(MJX_DATA_FORMULA, math.math);
+    math.typesetRoot.setAttribute(MJX_DATA_FORMULA_TYPE, cls);
+    math.typesetRoot = doc.adaptor.node(tag, {class: spanClass, style: "cursor:pointer"}, [math.typesetRoot]);
+  }
+
+  render() {
+    const {codeNum, previewType} = this.props.navbar;
+    const {isEditAreaOpen, isPreviewAreaOpen, isStyleEditorOpen, isImmersiveEditing} = this.props.view;
+    const {isSearchOpen} = this.props.dialog;
+
+    const parseHtml =
+      codeNum === 0
+        ? markdownParserWechat.render(this.props.content.content)
+        : markdownParser.render(this.props.content.content);
+
+    const mdEditingClass = classnames({
+      "nice-md-editing": !isImmersiveEditing,
+      "nice-md-editing-immersive": isImmersiveEditing,
+      "nice-md-editing-hide": !isEditAreaOpen,
+    });
+
+    const styleEditingClass = classnames({
+      "nice-style-editing": true,
+      "nice-style-editing-hide": isImmersiveEditing,
+    });
+
+    const richTextClass = classnames({
+      "nice-marked-text": true,
+      "nice-marked-text-pc": previewType === "pc",
+      "nice-marked-text-hide": isImmersiveEditing || !isPreviewAreaOpen,
+    });
+
+    const richTextBoxClass = classnames({
+      "nice-wx-box": true,
+      "nice-wx-box-pc": previewType === "pc",
+    });
+
+    const textContainerClass = classnames({
+      "nice-text-container": !isImmersiveEditing,
+      "nice-text-container-immersive": isImmersiveEditing,
+    });
+
+    return (
+      <appContext.Consumer>
+        {({defaultTitle, onStyleChange, onStyleBlur, onStyleFocus, token}) => (
+          <div className="nice-app">
+            <Navbar title={defaultTitle} token={token} />
+            <Toobar token={token} />
+            <div className={textContainerClass}>
+              <div id="nice-md-editor" className={mdEditingClass} onMouseOver={(e) => this.setCurrentIndex(1, e)}>
+                {isSearchOpen && <SearchBox />}
+                <CodeMirror
+                  value={this.props.content.content}
+                  options={{
+                    theme: "md-mirror",
+                    keyMap: "sublime",
+                    mode: "markdown",
+                    lineWrapping: true,
+                    lineNumbers: false,
+                    extraKeys: {
+                      ...bindHotkeys(this.props.content, this.props.dialog),
+                      Tab: betterTab,
+                      RightClick: rightClick,
+                    },
+                  }}
+                  onChange={this.handleChange}
+                  onScroll={this.handleScroll}
+                  onFocus={this.handleFocus}
+                  onBlur={this.handleBlur}
+                  onDrop={this.handleDrop}
+                  onPaste={this.handlePaste}
+                  ref={this.getInstance}
+                />
+              </div>
+              <div id="nice-rich-text" className={richTextClass} onMouseOver={(e) => this.setCurrentIndex(2, e)}>
+                <Sidebar />
+                <div
+                  id={BOX_ID}
+                  className={richTextBoxClass}
+                  onScroll={this.handleScroll}
+                  ref={(node) => {
+                    this.previewContainer = node;
+                  }}
+                >
+                  <section
+                    id={LAYOUT_ID}
+                    data-tool="markdown2wechat编辑器"
+                    data-website="https://aizhuanqian.com"
+                    dangerouslySetInnerHTML={{
+                      __html: parseHtml,
+                    }}
+                    ref={(node) => {
+                      this.previewWrap = node;
+                    }}
+                  />
+                </div>
+              </div>
+
+              {isStyleEditorOpen && (
+                <div id="nice-style-editor" className={styleEditingClass}>
+                  <StyleEditor onStyleChange={onStyleChange} onStyleBlur={onStyleBlur} onStyleFocus={onStyleFocus} />
+                </div>
+              )}
+
+              <Dialog />
+              <EditorMenu />
+            </div>
+            <Footer />
+          </div>
+        )}
+      </appContext.Consumer>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Lib.js

@@ -0,0 +1,155 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Result} from "antd";
+import {Provider} from "mobx-react";
+
+import "./index.css";
+
+import App from "./App";
+
+import content from "./store/content";
+import userInfo from "./store/userInfo";
+import navbar from "./store/navbar";
+import footer from "./store/footer";
+import dialog from "./store/dialog";
+import imageHosting from "./store/imageHosting";
+import view from "./store/view";
+
+import {isPC} from "./utils/helper";
+import appContext from "./utils/appContext";
+import SvgIcon from "./icon";
+import {solveWeChatMath, solveZhihuMath, solveHtml} from "./utils/converter";
+import {LAYOUT_ID} from "./utils/constant";
+
+class Lib extends Component {
+  getWeChatHtml() {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveWeChatMath();
+    const res = solveHtml();
+    layout.innerHTML = html; // 恢复现场
+    return res;
+  }
+
+  getZhihuHtml() {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveZhihuMath();
+    const res = solveHtml();
+    layout.innerHTML = html; // 恢复现场
+    return res;
+  }
+
+  render() {
+    const {
+      defaultTitle,
+      defaultText,
+      onTextChange,
+      onTextBlur,
+      onTextFocus,
+      onStyleChange,
+      onStyleBlur,
+      onStyleFocus,
+      token,
+      useImageHosting,
+    } = this.props;
+    const appCtx = {
+      defaultTitle,
+      defaultText,
+      onTextChange,
+      onTextBlur,
+      onTextFocus,
+      onStyleChange,
+      onStyleBlur,
+      onStyleFocus,
+      token,
+      useImageHosting,
+    };
+    return (
+      <Provider
+        content={content}
+        userInfo={userInfo}
+        navbar={navbar}
+        footer={footer}
+        dialog={dialog}
+        imageHosting={imageHosting}
+        view={view}
+      >
+        {isPC() ? (
+          <appContext.Provider value={appCtx}>
+            <App
+              defaultText={defaultText}
+              onTextChange={onTextChange}
+              onTextBlur={onTextBlur}
+              onTextFocus={onTextFocus}
+              onStyleChange={onStyleChange}
+              onStyleBlur={onStyleBlur}
+              onStyleFocus={onStyleFocus}
+              useImageHosting={useImageHosting}
+              token={token}
+            />
+          </appContext.Provider>
+        ) : (
+          <Result
+            icon={<SvgIcon name="smile" style={style.svgIcon} />}
+            title="请使用 PC 端打开排版工具"
+            subTitle="更多 Markdown Nice 信息，请扫码关注公众号「编程如画」"
+            extra={<img alt="" style={{width: "100%"}} src="https://my-wechat.mdnice.com/wechat.jpg" />}
+          />
+        )}
+      </Provider>
+    );
+  }
+}
+
+const style = {
+  svgIcon: {
+    width: "72px",
+    height: "72px",
+  },
+};
+
+Lib.defaultProps = {
+  defaultTitle: "",
+  defaultText: "",
+  onTextChange: () => {},
+  onTextBlur: () => {},
+  onTextFocus: () => {},
+  onStyleChange: () => {},
+  onStyleBlur: () => {},
+  onStyleFocus: () => {},
+  token: "",
+  // eslint-disable-next-line react/default-props-match-prop-types
+  useImageHosting: {
+    url: "",
+    name: "",
+    isSmmsOpen: true,
+    isQiniuyunOpen: true,
+    isAliyunOpen: true,
+    isGiteeOpen: true,
+    isGitHubOpen: true,
+  },
+};
+Lib.propTypes = {
+  defaultTitle: PropTypes.string,
+  defaultText: PropTypes.string,
+  onTextChange: PropTypes.func,
+  onTextBlur: PropTypes.func,
+  onTextFocus: PropTypes.func,
+  onStyleChange: PropTypes.func,
+  onStyleBlur: PropTypes.func,
+  onStyleFocus: PropTypes.func,
+  token: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props
+  useImageHosting: PropTypes.shape({
+    url: PropTypes.string,
+    name: PropTypes.string,
+    isSmmsOpen: PropTypes.bool,
+    isQiniuyunOpen: PropTypes.bool,
+    isAliyunOpen: PropTypes.bool,
+    isGiteeOpen: PropTypes.bool,
+    isGitHubOpen: PropTypes.bool,
+  }),
+};
+
+export default Lib;

src/component/Dialog/AboutDialog.js

@@ -0,0 +1,100 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, Button} from "antd";
+
+@inject("dialog")
+@observer
+class AboutDialog extends Component {
+  handleOk = () => {
+    this.props.dialog.setAboutOpen(false);
+  };
+
+  handleCancel = () => {
+    this.props.dialog.setAboutOpen(false);
+  };
+
+  handleVersion = () => {
+    this.props.dialog.setAboutOpen(false);
+    this.props.dialog.setVersionOpen(true);
+  };
+
+  render() {
+    return (
+      <Modal
+        title="关于"
+        okText="确认"
+        cancelText="取消"
+        visible={this.props.dialog.isAboutOpen}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+        footer={[
+          <Button key="submit" type="primary" onClick={this.handleOk}>
+            确认
+          </Button>,
+        ]}
+        bodyStyle={{
+          paddingTop: "5px",
+        }}
+      >
+        <h3 style={style.headerMargin}>
+          Markdown2Html
+          <a
+            id="nice-about-dialog-star"
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/shenweiyan/Markdown2Html"
+            style={style.noBorder}
+          >
+            <img alt="" style={style.img} src="https://badgen.net/github/stars/shenweiyan/Markdown2Html" />
+          </a>
+        </h3>
+
+        <p style={style.lineHeight}>支持自定义样式的 Markdown 编辑器；</p>
+        <p style={style.lineHeight}>支持微信公众号、知乎和稀土掘金；</p>
+        <p style={style.lineHeight}>
+          如果你喜欢我们的工具，欢迎关注
+          <a
+            id="nice-about-dialog-github"
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/shenweiyan/Markdown2Html"
+          >
+            &nbsp;GitHub&nbsp;
+          </a>
+        </p>
+      </Modal>
+    );
+  }
+}
+
+const style = {
+  leftImgWidth: {
+    width: "40%",
+    height: "100%",
+  },
+  rightImgWidth: {
+    width: "60%",
+    height: "100%",
+  },
+  headerMargin: {
+    marginTop: "5px",
+    marginBottom: "5px",
+    color: "black",
+  },
+  lineHeight: {
+    lineHeight: "26px",
+    color: "black",
+    padding: 0,
+    margin: 0,
+  },
+  img: {
+    width: "70px",
+    marginLeft: "10px",
+    display: "inline-block",
+  },
+  noBorder: {
+    border: "none",
+  },
+};
+
+export default AboutDialog;

src/component/Dialog/FormDialog.js

@@ -0,0 +1,102 @@
+import React from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, InputNumber, Form} from "antd";
+
+@inject("dialog")
+@inject("content")
+@observer
+class FormDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialState,
+    };
+  }
+
+  buildRow = (rowNum, columnNum) => {
+    let appendText = "|";
+    if (rowNum === 1) {
+      appendText += " --- |";
+      for (let i = 0; i < columnNum - 1; i++) {
+        appendText += " --- |";
+      }
+    } else {
+      appendText += "     |";
+      for (let i = 0; i < columnNum - 1; i++) {
+        appendText += "     |";
+      }
+    }
+    return appendText + (/windows|win32/i.test(navigator.userAgent) ? "\r\n" : "\n");
+  };
+
+  buildFormFormat = (rowNum, columnNum) => {
+    let formFormat = "";
+    for (let i = 0; i < 3; i++) {
+      formFormat += this.buildRow(i, columnNum);
+    }
+    for (let i = 3; i <= rowNum; i++) {
+      formFormat += this.buildRow(i, columnNum);
+    }
+    return formFormat;
+  };
+
+  handleOk = () => {
+    const {markdownEditor} = this.props.content;
+    const cursor = markdownEditor.getCursor();
+
+    const text = this.buildFormFormat(this.state.rowNum, this.state.columnNum);
+    markdownEditor.replaceSelection(text, cursor);
+
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+
+    this.handleCancel();
+    cursor.ch += 2;
+    markdownEditor.setCursor(cursor);
+    markdownEditor.focus();
+  };
+
+  handleCancel = () => {
+    this.setState(initialState);
+    this.props.dialog.setFormOpen(false);
+  };
+
+  render() {
+    return (
+      <Modal
+        title="添加表格"
+        okText="确认"
+        cancelText="取消"
+        visible={this.props.dialog.isFormOpen}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+      >
+        <Form.Item label="行数" labelCol={{span: 4}}>
+          <InputNumber
+            min={2}
+            max={10}
+            value={this.state.rowNum}
+            defaultValue={1}
+            onChange={(value) => this.setState({rowNum: value})}
+          />
+        </Form.Item>
+        <Form.Item label="列数" labelCol={{span: 4}}>
+          <InputNumber
+            min={1}
+            max={10}
+            value={this.state.columnNum}
+            defaultValue={1}
+            onChange={(value) => this.setState({columnNum: value})}
+          />
+        </Form.Item>
+      </Modal>
+    );
+  }
+}
+
+const initialState = {
+  columnNum: 1,
+  rowNum: 2,
+};
+
+export default FormDialog;

src/component/Dialog/HistoryDialog.js

@@ -0,0 +1,146 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, Empty, message} from "antd";
+import LocalHistory from "../LocalHistory";
+import {AutoSaveInterval, getLocalDocuments, setLocalDocuments, setLocalDraft} from "../LocalHistory/util";
+import IndexDB from "../LocalHistory/indexdb";
+import debouce from "lodash.debounce";
+
+const DocumentID = 1;
+
+@inject("dialog")
+@inject("content")
+@observer
+class HistoryDialog extends Component {
+  timer = null;
+
+  db = null;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      documents: [],
+    };
+  }
+
+  async componentDidMount() {
+    await this.initIndexDB();
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  get editor() {
+    return this.props.content.markdownEditor;
+  }
+
+  //
+  // async UNSAFE_componentWillReceiveProps(nextProps) {
+  //   // 文档 id 变更
+  //   if (this.props.documentID !== nextProps.documentID && nextProps.documentID != null) {
+  //     if (this.db) {
+  //       await this.overrideLocalDocuments(nextProps.documentID);
+  //     }
+  //   }
+  // }
+  //
+
+  closeDialog = () => {
+    this.props.dialog.setHistoryOpen(false);
+  };
+
+  editLocalDocument = (content) => {
+    this.props.content.setContent(content);
+    message.success("恢复成功！");
+    this.closeDialog();
+  };
+
+  autoSave = async (isRecent = false) => {
+    const Content = this.props.content.markdownEditor.getValue();
+    if (Content.trim() !== "") {
+      const document = {
+        Content,
+        DocumentID: this.props.documentID,
+        SaveTime: new Date(),
+      };
+      const setLocalDocumentMethod = isRecent && this.state.documents.length > 0 ? setLocalDraft : setLocalDocuments;
+      await setLocalDocumentMethod(this.db, this.state.documents, document);
+      await this.overrideLocalDocuments(this.props.documentID);
+    }
+  };
+
+  async initIndexDB() {
+    try {
+      const indexDB = new IndexDB({
+        name: "mdnice-local-history",
+        storeName: "customers",
+        storeOptions: {keyPath: "id", autoIncrement: true},
+        storeInit: (objectStore) => {
+          objectStore.createIndex("DocumentID", "DocumentID", {unique: false});
+          objectStore.createIndex("SaveTime", "SaveTime", {unique: false});
+        },
+      });
+      this.db = await indexDB.init();
+
+      if (this.db && this.props.documentID) {
+        await this.overrideLocalDocuments(this.props.documentID);
+      }
+      // 每隔一段时间自动保存
+      this.timer = setInterval(async () => {
+        await this.autoSave();
+      }, AutoSaveInterval);
+      // 每改变内容自动保存最近的一条
+      this.editor.on &&
+        this.editor.on(
+          "change",
+          debouce(async () => {
+            await this.autoSave(true);
+          }, 1000),
+        );
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  // 刷新本地历史文档
+  async overrideLocalDocuments(documentID) {
+    const localDocuments = await getLocalDocuments(this.db, +documentID);
+    // console.log('refresh local',localDocuments);
+    this.setState({
+      documents: localDocuments,
+    });
+  }
+
+  render() {
+    return (
+      <Modal
+        className="nice-md-local-history"
+        title="本地历史"
+        centered
+        width={1080}
+        visible={this.props.dialog.isHistoryOpen}
+        onCancel={this.closeDialog}
+        footer={null}
+      >
+        {this.state.documents && this.state.documents.length > 0 ? (
+          <LocalHistory
+            content={this.props.content.content}
+            documents={this.state.documents}
+            documentID={this.props.documentID}
+            onEdit={this.editLocalDocument}
+            onCancel={this.closeDialog}
+          />
+        ) : (
+          <Empty style={{width: "100%"}} description="暂无本地历史" />
+        )}
+      </Modal>
+    );
+  }
+}
+
+HistoryDialog.defaultProps = {
+  documentID: DocumentID,
+};
+
+export default HistoryDialog;

src/component/Dialog/ImageDialog.js

@@ -0,0 +1,180 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, Upload, Tabs, Select} from "antd";
+
+import SvgIcon from "../../icon";
+
+import AliOSS from "../ImageHosting/AliOSS";
+import QiniuOSS from "../ImageHosting/QiniuOSS";
+import Gitee from "../ImageHosting/Gitee";
+import GitHub from "../ImageHosting/GitHub";
+
+import {uploadAdaptor} from "../../utils/imageHosting";
+import {SM_MS_PROXY, IMAGE_HOSTING_TYPE, IMAGE_HOSTING_NAMES} from "../../utils/constant";
+import appContext from "../../utils/appContext";
+
+const {Dragger} = Upload;
+const {TabPane} = Tabs;
+const {Option} = Select;
+
+@inject("dialog")
+@inject("content")
+@inject("imageHosting")
+@inject("navbar")
+@observer
+class ImageDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.images = [];
+  }
+
+  // 确认后将内容更新到编辑器上
+  handleOk = () => {
+    let text = "";
+    // 成功后添加url
+    if (this.props.navbar.isContainImgName) {
+      this.images.forEach((value) => {
+        text += `![${value.filename}](${value.url})\n`;
+      });
+    } else {
+      this.images.forEach((value) => {
+        text += `![](${value.url})\n`;
+      });
+    }
+    // 重新初始化
+    this.images = [];
+    const {markdownEditor} = this.props.content;
+    const cursor = markdownEditor.getCursor();
+    markdownEditor.replaceSelection(text, cursor);
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+
+    this.props.dialog.setImageOpen(false);
+    cursor.ch += 2;
+    markdownEditor.setCursor(cursor);
+    markdownEditor.focus();
+  };
+
+  handleCancel = () => {
+    this.props.dialog.setImageOpen(false);
+  };
+
+  customRequest = ({action, data, file, headers, onError, onProgress, onSuccess, withCredentials}) => {
+    const formData = new FormData();
+    const {images} = this;
+    if (data) {
+      Object.keys(data).forEach((key) => {
+        formData.append(key, data[key]);
+      });
+    }
+    // 使用阿里云图床
+    if (this.props.imageHosting.type === "阿里云") {
+      uploadAdaptor({file, onSuccess, onError, images});
+    }
+    // 使用七牛云图床
+    else if (this.props.imageHosting.type === "七牛云") {
+      uploadAdaptor({file, onSuccess, onError, onProgress, images});
+    }
+    // 使用SM.MS图床
+    else if (this.props.imageHosting.type === "SM.MS") {
+      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials});
+    }
+    // 使用Gitee图床
+    else if (this.props.imageHosting.type === "Gitee") {
+      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
+    }
+    // 使用GitHub图床
+    else if (this.props.imageHosting.type === "GitHub") {
+      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
+    }
+    // 使用用户提供的图床或是默认mdnice图床
+    else {
+      uploadAdaptor({formData, file, onSuccess, onError, images});
+    }
+
+    return {
+      abort() {
+        console.log("upload progress is aborted.");
+      },
+    };
+  };
+
+  typeChange = (type) => {
+    this.props.imageHosting.setType(type);
+    window.localStorage.setItem(IMAGE_HOSTING_TYPE, type);
+  };
+
+  render() {
+    const {hostingList, type} = this.props.imageHosting;
+
+    const columns = hostingList.map((option, index) => (
+      <Option key={index} value={option.value}>
+        {option.label}
+      </Option>
+    ));
+
+    const imageHostingSwitch = (
+      <Select style={{width: "90px"}} value={type} onChange={this.typeChange}>
+        {columns}
+      </Select>
+    );
+
+    return (
+      <Modal
+        title="本地上传"
+        okText="确认"
+        cancelText="取消"
+        visible={this.props.dialog.isImageOpen}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+        bodyStyle={{paddingTop: "10px"}}
+      >
+        <appContext.Consumer>
+          {({useImageHosting}) => (
+            <Tabs tabBarExtraContent={imageHostingSwitch} type="card">
+              <TabPane tab="图片上传" key="1">
+                <Dragger name="file" multiple action={SM_MS_PROXY} customRequest={this.customRequest}>
+                  <p className="ant-upload-drag-icon">
+                    <SvgIcon name="inbox" style={style.svgIcon} fill="#40a9ff" />
+                  </p>
+                  <p className="ant-upload-text">点击或拖拽一张或多张照片上传</p>
+                  <p className="ant-upload-hint">{"正在使用" + type + "图床"}</p>
+                </Dragger>
+              </TabPane>
+              {useImageHosting.isAliyunOpen ? (
+                <TabPane tab={IMAGE_HOSTING_NAMES.aliyun} key="2">
+                  <AliOSS />
+                </TabPane>
+              ) : null}
+              {useImageHosting.isQiniuyunOpen ? (
+                <TabPane tab={IMAGE_HOSTING_NAMES.qiniuyun} key="3">
+                  <QiniuOSS />
+                </TabPane>
+              ) : null}
+              {useImageHosting.isGiteeOpen ? (
+                <TabPane tab={IMAGE_HOSTING_NAMES.gitee} key="4">
+                  <Gitee />
+                </TabPane>
+              ) : null}
+              {useImageHosting.isGitHubOpen ? (
+                <TabPane tab={IMAGE_HOSTING_NAMES.github} key="5">
+                  <GitHub />
+                </TabPane>
+              ) : null}
+            </Tabs>
+          )}
+        </appContext.Consumer>
+      </Modal>
+    );
+  }
+}
+
+const style = {
+  svgIcon: {
+    width: "48px",
+    height: "48px",
+  },
+};
+
+export default ImageDialog;

src/component/Dialog/LinkDialog.js

@@ -0,0 +1,61 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, Input, Form} from "antd";
+
+@inject("dialog")
+@inject("content")
+@observer
+class LinkDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      link: "",
+    };
+  }
+
+  handleOk = () => {
+    const {markdownEditor} = this.props.content;
+    const cursor = markdownEditor.getCursor();
+    const selection = markdownEditor.getSelection();
+    const text = `[${selection}](${this.state.link})`;
+    markdownEditor.replaceSelection(text, cursor);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+
+    this.setState({link: ""});
+    this.props.dialog.setLinkOpen(false);
+    cursor.ch += 1;
+    markdownEditor.setCursor(cursor);
+    markdownEditor.focus();
+  };
+
+  handleCancel = () => {
+    this.setState({link: ""});
+    this.props.dialog.setLinkOpen(false);
+  };
+
+  handleChange = (e) => {
+    this.setState({link: e.target.value});
+  };
+
+  render() {
+    return (
+      <Modal
+        title="添加链接"
+        okText="确认"
+        cancelText="取消"
+        visible={this.props.dialog.isLinkOpen}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+      >
+        <Form.Item label="链接地址">
+          <Input placeholder="请输入链接地址" value={this.state.link} onChange={this.handleChange} />
+        </Form.Item>
+      </Modal>
+    );
+  }
+}
+
+export default LinkDialog;

src/component/Dialog/SitDownDialog.js

@@ -0,0 +1,106 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, Input, Select, message} from "antd";
+
+import SitDownConverter from "../../utils/sitdownConverter";
+import {SITDOWN_OPTIONS} from "../../utils/constant";
+
+const {Option} = Select;
+const {TextArea} = Input;
+
+@inject("dialog")
+@inject("content")
+@observer
+class SitDownDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      platform: "default",
+      sourceCode: "",
+    };
+  }
+
+  handleOk = () => {
+    try {
+      const {platform, sourceCode} = this.state;
+
+      const domParser = new DOMParser();
+      const sourceCodeDom = domParser.parseFromString(sourceCode, "text/html");
+
+      let content = "";
+
+      if (platform === "csdn") {
+        const articleDom = sourceCodeDom.getElementById("content_views");
+        content = SitDownConverter.CSDN(articleDom);
+      } else if (platform === "juejin") {
+        const articleDom = sourceCodeDom.getElementsByClassName("article-content");
+        content = SitDownConverter.Juejin(articleDom[0]);
+      } else if (platform === "zhihu") {
+        const articleDom = sourceCodeDom.getElementsByClassName("Post-RichText");
+        content = SitDownConverter.Zhihu(articleDom[0]);
+      } else if (platform === "wechat") {
+        const articleDom = sourceCodeDom.getElementById("js_content");
+        content = SitDownConverter.Wechat(articleDom);
+      } else {
+        content = SitDownConverter.GFM(sourceCodeDom);
+      }
+
+      this.props.content.setContent(content);
+
+      this.props.dialog.setSitDownOpen(false);
+
+      const {markdownEditor} = this.props.content;
+      // const cursor = markdownEditor.getCursor();
+      // cursor.ch += 1;
+      // markdownEditor.setCursor(cursor);
+      markdownEditor.focus();
+    } catch (e) {
+      message.error("源代码与已选平台的文章域名不符");
+    }
+  };
+
+  handleCancel = () => {
+    this.props.dialog.setSitDownOpen(false);
+  };
+
+  handlePlatform = (value) => {
+    this.setState({platform: value});
+  };
+
+  handleSourceCode = (e) => {
+    this.setState({sourceCode: e.target.value});
+  };
+
+  render() {
+    const {sourceCode, platform} = this.state;
+    return (
+      <Modal
+        title="html 转 markdown"
+        okText="转换"
+        cancelText="取消"
+        visible={this.props.dialog.isSitDownOpen}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+      >
+        <Select value={platform} style={{width: 300, marginBottom: "20px"}} onChange={this.handlePlatform}>
+          {SITDOWN_OPTIONS.map((option) => (
+            <Option key={option.key} value={option.key}>
+              {option.value}
+            </Option>
+          ))}
+        </Select>
+
+        <TextArea
+          rows={4}
+          style={{marginBottom: "5px"}}
+          value={sourceCode}
+          onChange={this.handleSourceCode}
+          placeholder="请放入网页源代码"
+        />
+        <span>提示：右键-&gt;显示网页源代码-&gt;全选-&gt;复制粘贴。</span>
+      </Modal>
+    );
+  }
+}
+
+export default SitDownDialog;

src/component/Dialog/VersionDialog.css

@@ -0,0 +1,3 @@
+.specialInfo > * {
+  width: 100%;
+}

src/component/Dialog/VersionDialog.js

@@ -0,0 +1,155 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, Timeline, Button} from "antd";
+import axios from "axios";
+import {NEWEST_VERSION} from "../../utils/constant";
+import SvgIcon from "../../icon";
+
+import "./VersionDialog.css";
+
+@inject("dialog")
+@observer
+class VersionDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // eslint-disable-next-line react/no-unused-state
+      versionNumber: 0,
+      versionTimeline: [],
+      recommend: null,
+      specialInfo: "",
+    };
+  }
+
+  handleOk = () => {
+    this.props.dialog.setVersionOpen(false);
+  };
+
+  handleCancel = () => {
+    this.props.dialog.setVersionOpen(false);
+  };
+
+  handleMore = () => {
+    const w = window.open("about:blank");
+    w.location.href = "https://git.luckday.cn/Markdown2Html/master/CHANGELOG.md";
+  };
+
+  handleDocs = () => {
+    const w = window.open("about:blank");
+    w.location.href = "https://github.com/shenweiyan/Markdown2Html";
+  };
+
+  componentDidMount = async () => {
+    try {
+      const data = {
+        versionId: 1,
+        versionNumber: "1.0.0",
+        versionTimeline: ["2023-09-20 增加网格黑主题", "2023-09-14 解决超链接文字复制到公众号颜色失效的问题", "2023-09-01 优化部分配置与信息", "2023-08-30 Fork 自 markdown2html"],
+        recommend: {
+          link: "https://github.com/shenweiyan/Knowledge-Garden",
+          mainInfo: "欢迎关注我的知识花园",
+        },
+        specialInfo: ''
+        //specialInfo:
+        //  '<div style="display:flex;justify-content:center;align-items:center;"><img style="width:50%;" src="http://md.aizhuanqian.online/img/wechat_qr.df324554.jpeg"/></div>',
+      };
+      const newestVersion = localStorage.getItem(NEWEST_VERSION);
+      if (data.versionNumber !== newestVersion) {
+        this.props.dialog.setVersionOpen(true);
+        localStorage.setItem(NEWEST_VERSION, data.versionNumber);
+      }
+      this.setState({...data});
+    } catch (err) {
+      console.error("读取最新版本信息错误");
+    }
+  };
+
+  render() {
+    return (
+      <Modal
+        title="版本更新与说明"
+        visible={this.props.dialog.isVersionOpen}
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+        footer={[
+          <Button key="submit" type="primary" onClick={this.handleOk}>
+            确认
+          </Button>,
+        ]}
+        destroyOnClose
+      >
+        <Timeline>
+          <Timeline.Item dot={<SvgIcon name="environment" style={style.svgIcon} />}>
+              <strong>更多版本更新与说明信息请查看
+                <a
+                  id="more-info"
+                  style={{fontWeight: "bold", borderBottom: "solid"}}
+                  alt=""
+                  href="https://github.com/shenweiyan/Markdown2Html"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  这里
+                </a>
+              </strong>
+          </Timeline.Item>
+          {this.state.versionTimeline.map((version, index) => {
+            /*if (index === 0) {
+              return (
+                <Timeline.Item key={index} dot={<SvgIcon name="environment" style={style.svgIcon} />}>
+                  <strong>{version}</strong>
+                </Timeline.Item>
+              );
+            } else {
+              return <Timeline.Item key={index}>{version}</Timeline.Item>;
+            }*/
+            return <Timeline.Item key={index}>{version}</Timeline.Item>;
+          })}
+          <Timeline.Item>
+            了解更多，请查看
+            <a
+              id="nice-version-dialog-doc"
+              style={{fontWeight: "bold"}}
+              alt=""
+              href="https://github.com/shenweiyan/Markdown2Html"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              本仓库源码与说明
+            </a>
+          </Timeline.Item>
+          {this.state.recommend && (
+            <Timeline.Item dot={<SvgIcon name="more" style={style.svgIcon} />}>
+              <a
+                id="nice-version-dialog-recommend"
+                style={{fontWeight: "bold", borderBottom: "double"}}
+                alt=""
+                href={this.state.recommend.link}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {this.state.recommend.mainInfo}
+              </a>
+            </Timeline.Item>
+          )}
+        </Timeline>
+        {this.state.specialInfo && (
+          <div
+            id="nice-version-dialog-special"
+            dangerouslySetInnerHTML={{__html: this.state.specialInfo}}
+            className="specialInfo"
+          />
+        )}
+      </Modal>
+    );
+  }
+}
+
+const style = {
+  svgIcon: {
+    width: "16px",
+    height: "16px",
+  },
+};
+
+export default VersionDialog;

src/component/ImageHosting/AliOSS.js

@@ -0,0 +1,96 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Input, Form} from "antd";
+import {ALIOSS_IMAGE_HOSTING} from "../../utils/constant";
+
+const formItemLayout = {
+  labelCol: {
+    xs: {span: 6},
+  },
+  wrapperCol: {
+    xs: {span: 16},
+  },
+};
+
+@inject("imageHosting")
+@observer
+class AliOSS extends Component {
+  constructor(props) {
+    super(props);
+    // 从localstorage里面读取
+    const imageHosting = JSON.parse(localStorage.getItem(ALIOSS_IMAGE_HOSTING));
+    this.state = {
+      imageHosting,
+    };
+  }
+
+  regionChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.region = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  accessKeyIdChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.accessKeyId = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  accessKeySecretChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.accessKeySecret = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  bucketChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.bucket = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(ALIOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  render() {
+    const {region, accessKeyId, accessKeySecret, bucket} = this.state.imageHosting;
+    return (
+      <Form {...formItemLayout}>
+        <Form.Item label="Bucket" style={style.formItem}>
+          <Input value={bucket} onChange={this.bucketChange} placeholder="例如：my-wechat" />
+        </Form.Item>
+        <Form.Item label="Region" style={style.formItem}>
+          <Input value={region} onChange={this.regionChange} placeholder="例如：oss-cn-hangzhou" />
+        </Form.Item>
+        <Form.Item label="AccessKey ID" style={style.formItem}>
+          <Input value={accessKeyId} onChange={this.accessKeyIdChange} placeholder="例如：qweASDF1234zxcvb" />
+        </Form.Item>
+        <Form.Item label="AccessKey Secret" style={style.formItem}>
+          <Input
+            value={accessKeySecret}
+            onChange={this.accessKeySecretChange}
+            placeholder="例如：qweASDF1234zxcvbqweASD"
+          />
+        </Form.Item>
+        <Form.Item label="提示" style={style.formItem}>
+          <span>配置后请在右上角进行切换，</span>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://preview.mdnice.com/article/developer/aliyun-image-hosting/"
+          >
+            阿里云图床配置文档
+          </a>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const style = {
+  formItem: {
+    marginBottom: "10px",
+  },
+};
+
+export default AliOSS;

src/component/ImageHosting/GitHub.js

@@ -0,0 +1,95 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Input, Form, Checkbox} from "antd";
+import {GITHUB_IMAGE_HOSTING} from "../../utils/constant";
+
+const formItemLayout = {
+  labelCol: {
+    xs: {span: 6},
+  },
+  wrapperCol: {
+    xs: {span: 16},
+  },
+};
+
+@inject("imageHosting")
+@observer
+class Gitee extends Component {
+  constructor(props) {
+    super(props);
+    // 从localstorage里面读取
+    const imageHosting = JSON.parse(localStorage.getItem(GITHUB_IMAGE_HOSTING));
+    this.state = {
+      imageHosting,
+    };
+  }
+
+  usernameChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.username = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  repoChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.repo = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  tokenChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.token = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  jsdelivrChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.jsdelivr = e.target.checked ? "true" : "false";
+    console.log(imageHosting);
+    this.setState({imageHosting});
+    localStorage.setItem(GITHUB_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  render() {
+    const {username, repo, token, jsdelivr} = this.state.imageHosting;
+    return (
+      <Form {...formItemLayout}>
+        <Form.Item label="用户名" style={style.formItem}>
+          <Input value={username} onChange={this.usernameChange} placeholder="例如：mdnice" />
+        </Form.Item>
+        <Form.Item label="仓库名" style={style.formItem}>
+          <Input value={repo} onChange={this.repoChange} placeholder="例如：picture" />
+        </Form.Item>
+        <Form.Item label="token" style={style.formItem}>
+          <Input value={token} onChange={this.tokenChange} placeholder="例如：qweASDF1234zxcvb" />
+        </Form.Item>
+        <Form.Item label="jsDelivr CDN" style={style.formItem}>
+          <Checkbox checked={jsdelivr === "true"} onChange={this.jsdelivrChange}>
+            （强烈建议开启，加速图片）
+          </Checkbox>
+        </Form.Item>
+        <Form.Item label="提示" style={style.formItem}>
+          <span>配置后请在右上角进行切换，</span>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://preview.mdnice.com/article/developer/github-image-hosting/"
+          >
+            GitHub图床配置文档
+          </a>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const style = {
+  formItem: {
+    marginBottom: "10px",
+  },
+};
+
+export default Gitee;

src/component/ImageHosting/Gitee.js

@@ -0,0 +1,82 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Input, Form} from "antd";
+import {GITEE_IMAGE_HOSTING} from "../../utils/constant";
+
+const formItemLayout = {
+  labelCol: {
+    xs: {span: 6},
+  },
+  wrapperCol: {
+    xs: {span: 16},
+  },
+};
+
+@inject("imageHosting")
+@observer
+class Gitee extends Component {
+  constructor(props) {
+    super(props);
+    // 从localstorage里面读取
+    const imageHosting = JSON.parse(localStorage.getItem(GITEE_IMAGE_HOSTING));
+    this.state = {
+      imageHosting,
+    };
+  }
+
+  usernameChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.username = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  repoChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.repo = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  tokenChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.token = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(GITEE_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  render() {
+    const {username, repo, token} = this.state.imageHosting;
+    return (
+      <Form {...formItemLayout}>
+        <Form.Item label="用户名" style={style.formItem}>
+          <Input value={username} onChange={this.usernameChange} placeholder="例如：mdnice" />
+        </Form.Item>
+        <Form.Item label="仓库名" style={style.formItem}>
+          <Input value={repo} onChange={this.repoChange} placeholder="例如：picture" />
+        </Form.Item>
+        <Form.Item label="token" style={style.formItem}>
+          <Input value={token} onChange={this.tokenChange} placeholder="例如：qweASDF1234zxcvb" />
+        </Form.Item>
+        <Form.Item label="提示" style={style.formItem}>
+          <span>配置后请在右上角进行切换，</span>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://preview.mdnice.com/article/developer/gitee-image-hosting/"
+          >
+            Gitee 图床配置文档
+          </a>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const style = {
+  formItem: {
+    marginBottom: "10px",
+  },
+};
+
+export default Gitee;

src/component/ImageHosting/QiniuOSS.js

@@ -0,0 +1,124 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Input, Select, Form} from "antd";
+import {QINIUOSS_IMAGE_HOSTING} from "../../utils/constant";
+
+const {Option} = Select;
+const formItemLayout = {
+  labelCol: {
+    xs: {span: 6},
+  },
+  wrapperCol: {
+    xs: {span: 16},
+  },
+};
+
+@inject("imageHosting")
+@observer
+class QiniuOSS extends Component {
+  constructor(props) {
+    super(props);
+    // 从localstorage里面读取
+    const imageHosting = JSON.parse(localStorage.getItem(QINIUOSS_IMAGE_HOSTING));
+    const link = imageHosting.domain.split("://")[1];
+    this.state = {
+      imageHosting,
+      link,
+    };
+  }
+
+  regionChange = (value) => {
+    const {imageHosting} = this.state;
+    imageHosting.region = value;
+    this.setState({imageHosting});
+    localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  accessKeyChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.accessKey = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  secretKeyChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.secretKey = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  bucketChange = (e) => {
+    const {imageHosting} = this.state;
+    imageHosting.bucket = e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  linkChange = (e) => {
+    this.setState({link: e.target.value});
+
+    const {imageHosting} = this.state;
+    imageHosting.domain = "https://" + e.target.value;
+    this.setState({imageHosting});
+    localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  namespaceChange = ({target: {value}}) => {
+    const {imageHosting} = this.state;
+    imageHosting.namespace = value;
+    this.setState({imageHosting});
+    localStorage.setItem(QINIUOSS_IMAGE_HOSTING, JSON.stringify(imageHosting));
+  };
+
+  render() {
+    const {region, accessKey, secretKey, bucket, namespace} = this.state.imageHosting;
+    const {link} = this.state;
+    return (
+      <Form {...formItemLayout}>
+        <Form.Item label="存储空间名称" style={style.formItem}>
+          <Input value={bucket} onChange={this.bucketChange} placeholder="例如：my-wechat" />
+        </Form.Item>
+        <Form.Item label="存储区域" style={style.formItem}>
+          <Select value={region} onChange={this.regionChange} placeholder="例如：qiniu.region.z2">
+            <Option value="z0">华东</Option>
+            <Option value="z1">华北</Option>
+            <Option value="z2">华南</Option>
+            <Option value="na0">北美</Option>
+            <Option value="as0">东南亚</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="AccessKey" style={style.formItem}>
+          <Input value={accessKey} onChange={this.accessKeyChange} placeholder="例如：qweASDF1234zxcvb" />
+        </Form.Item>
+        <Form.Item label="SecretKey" style={style.formItem}>
+          <Input value={secretKey} onChange={this.secretKeyChange} placeholder="例如：qweASDF1234zxcvbqweASD" />
+        </Form.Item>
+        <Form.Item label="自定义域名" style={style.formItem}>
+          <Input value={link} onChange={this.linkChange} addonBefore="https://" placeholder="例如：qiniu.mdnice.com" />
+        </Form.Item>
+        <Form.Item label="自定义命名空间" style={style.formItem}>
+          <Input value={namespace} onChange={this.namespaceChange} placeholder="例如：image/" />
+        </Form.Item>
+        <Form.Item label="提示" style={style.formItem}>
+          <span>配置后请在右上角进行切换，</span>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://preview.mdnice.com/article/developer/qiniu-image-hosting/"
+          >
+            七牛云图床配置文档
+          </a>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const style = {
+  formItem: {
+    marginBottom: "10px",
+  },
+};
+
+export default QiniuOSS;

src/component/LocalHistory/index.js

@@ -0,0 +1,113 @@
+import * as React from "react";
+import {Menu, Button, Radio} from "antd";
+import CodeMirror from "@uiw/react-codemirror";
+import {diff_match_patch as DiffMatchPath} from "diff-match-patch";
+
+import "./localHistory.css";
+
+const NOOP = () => {};
+const prefix = "nice-md-local-history";
+
+const diff = new DiffMatchPath();
+
+class LocalHistory extends React.Component {
+  constructor(props) {
+    super(props);
+    const {documents} = this.props;
+    this.state = {
+      content: documents[0].Content,
+      selectedKeys: String(documents[0].id),
+      mode: "all",
+    };
+  }
+
+  getDiffHtml = () => {
+    // eslint-disable-next-line no-underscore-dangle
+    var a = diff.diff_linesToChars_(this.state.content, this.props.content);
+    var lineText1 = a.chars1;
+    var lineText2 = a.chars2;
+    var diffs = diff.diff_main(lineText1, lineText2, false);
+    // eslint-disable-next-line no-underscore-dangle
+    diff.diff_charsToLines_(diffs, a.lineArray);
+    const html = diff
+      .diff_prettyHtml(diffs)
+      .replace(/¶/g, "")
+      .replace(/<br>/g, "&#8203;<br>&#8203;");
+    return html;
+  };
+
+  selectNav = ({selectedKeys}) => {
+    const {Content: content} = this.props.documents.find((doc) => String(doc.id) === String(selectedKeys[0])) || {};
+    this.setState({
+      content,
+      selectedKeys,
+    });
+  };
+
+  handleModeChange = (e) => {
+    this.setState({
+      mode: e.target.value,
+    });
+  };
+
+  render() {
+    const {documents} = this.props;
+
+    return (
+      <>
+        <Menu className={`${prefix}-nav`} onSelect={this.selectNav} selectedKeys={this.state.selectedKeys}>
+          {documents.map((d) => (
+            <Menu.Item key={d.id}>{d.SaveTime.toLocaleString()}</Menu.Item>
+          ))}
+        </Menu>
+        {this.state.content && (
+          <div className={`${prefix}-preview`}>
+            {this.state.mode === "all" ? (
+              <CodeMirror
+                key="local-history"
+                value={this.state.content}
+                height="calc(100% - 56px)"
+                options={{
+                  readOnly: true,
+                  theme: "md-mirror",
+                  mode: "markdown",
+                  lineWrapping: true,
+                  lineNumbers: false,
+                }}
+              />
+            ) : (
+              <div dangerouslySetInnerHTML={{__html: this.getDiffHtml()}} className={`${prefix}-diff-content`} />
+            )}
+            <div className={`${prefix}-btn-group`}>
+              <Radio.Group onChange={this.handleModeChange} value={this.state.mode}>
+                <Radio value="all">全文</Radio>
+                <Radio value="diff">和当前内容对比</Radio>
+              </Radio.Group>
+              <div>
+                <Button onClick={this.props.onCancel}>取消</Button>
+                <Button
+                  id="nice-local-history-review"
+                  type="primary"
+                  onClick={() => {
+                    this.props.onEdit(this.state.content);
+                  }}
+                >
+                  恢复此版本
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+}
+
+LocalHistory.defaultProps = {
+  visible: false,
+  document: [{}],
+  onEdit: NOOP,
+  onCancel: NOOP,
+};
+
+export default LocalHistory;

src/component/LocalHistory/indexdb.js

@@ -0,0 +1,63 @@
+import {message} from "antd";
+
+// In the following line, you should include the prefixes of implementations you want to test.
+const indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// DON'T use "var indexedDB = ..." if you're not in a function.
+// Moreover, you may need references to some window.IDB* objects:
+// const IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+// const IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+
+// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
+
+export default class IndexDB {
+  constructor(options = {}) {
+    this.options = options;
+  }
+
+  async init() {
+    if (!indexedDB) {
+      message.error("初始化 indexdb 失败！浏览器不支持");
+      throw Error("浏览器不支持 indexdb");
+    }
+
+    const {name, storeName = "", storeOptions = {}, storeInit = () => {}} = this.options;
+
+    this.storeName = storeName;
+    this.storeOptions = storeOptions;
+    this.storeInit = storeInit;
+
+    const request = indexedDB.open(name);
+    const result = await this.initEvent(request);
+    return result;
+  }
+
+  initEvent(request) {
+    return new Promise((resolve, reject) => {
+      request.onerror = (event) => {
+        // Do something with request.errorCode!
+        message.error("初始化数据库失败！", event.target.errorCode);
+        reject(new Error("初始化数据库失败！"));
+      };
+
+      request.onsuccess = (event) => {
+        const db = event.target.result;
+        console.log("成功初始化数据库");
+        // this.db = db;
+        resolve(db);
+      };
+
+      // 该事件仅在较新的浏览器中被实现
+      request.onupgradeneeded = (event) => {
+        // 更新对象存储空间和索引 ....
+        const db = event.target.result;
+        this.initStore(db, this.storeName, this.storeOptions, this.storeInit);
+      };
+    });
+  }
+
+  initStore(db, name, options, func) {
+    // 创建一个对象存储空间来持有信息。
+    const objectStore = db.createObjectStore(name, options);
+    if (func) func(objectStore);
+  }
+}

src/component/LocalHistory/localHistory.css

@@ -0,0 +1,66 @@
+.nice-md-local-history .ant-modal-body {
+    display: flex;
+    height: calc(100vh - 112px);
+}
+
+.nice-md-local-history .CodeMirror-merge,
+.nice-md-local-history .CodeMirror-merge .CodeMirror {
+    height: calc(100vh - 216px);
+}
+
+.nice-md-local-history .CodeMirror-merge-copy {
+    display: none;
+}
+
+.nice-md-local-history-preview {
+    width: 100%;
+    max-width: 776px;
+}
+
+.nice-md-local-history-btn-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-left: 20px;
+}
+.nice-md-local-history-btn-group button {
+    margin: 25px 10px;
+}
+
+.nice-md-local-history-btn-group button:last-child {
+    margin-right: 0;
+}
+
+.nice-md-local-history-nav {
+    width: 256px;
+    flex: 0 0 auto;
+    background: #fff;
+    border-radius: 4px 0 0 4px;
+    position: relative;
+    overflow-y: auto;
+}
+
+.nice-md-local-history-nav .ant-list-item {
+    border-bottom: 0;
+    padding: 17px 24px;
+}
+
+.nice-md-local-history-diff-content {
+    width: inherit;
+    background-color: rgba(245, 245, 245, 1);
+    overflow-y: scroll;
+    padding: 24px;
+    height: calc(100% - 56px);
+    color: #202020;
+    border-radius: 5px;
+    font-size: 16px;
+    font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-variant-caps: normal;
+    font-variant-east-asian: normal;
+    font-variant-ligatures: contextual;
+    line-height: 25px;
+    font-weight: 400;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "calt";
+    -webkit-font-smoothing: antialiased;
+}

src/component/LocalHistory/util.js

@@ -0,0 +1,106 @@
+import {message} from "antd";
+
+function saveTimeSort(a, b) {
+  return new Date(b.SaveTime).getTime() - new Date(a.SaveTime).getTime();
+}
+
+export const MaxLocalDocumentLength = 30;
+
+// export const AutoSaveInterval = 10 * 60 * 1000;
+export const AutoSaveInterval = 60 * 1000;
+
+export const getLocalDocuments = (db, DocumentID) => {
+  try {
+    const transaction = db.transaction(["customers"], "readonly");
+    const store = transaction.objectStore("customers");
+    const keyRange = IDBKeyRange.only(DocumentID);
+    const index = store.index("DocumentID");
+    const req = index.openCursor(keyRange);
+
+    return new Promise((resolve, reject) => {
+      const result = [];
+      req.onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor) {
+          // Do something with the matches.
+          result.push(cursor.value);
+          cursor.continue();
+        } else {
+          // console.log('获取成功 ');
+          result.sort(saveTimeSort);
+          resolve(result);
+        }
+      };
+      req.onerror = (event) => {
+        console.error("获取失败");
+        reject(event);
+      };
+    });
+  } catch (e) {
+    console.log("未知错误", DocumentID);
+    return Promise.reject(e);
+  }
+};
+
+export const setLocalDocuments = (db, localDocuments, document = {}) => {
+  const draftIndex = 0;
+  if (localDocuments[draftIndex + 1] && localDocuments[draftIndex + 1].Content === localDocuments[draftIndex].Content) {
+    // console.log("内容未更新，不进行本地保存。");
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["customers"], "readwrite");
+    const store = transaction.objectStore("customers");
+    let req = {};
+
+    // Info: 长度超过用 put，没超过用 add
+    if (localDocuments.length >= MaxLocalDocumentLength) {
+      const {id} = localDocuments.sort(saveTimeSort)[localDocuments.length - 1];
+      req = store.put({
+        ...document,
+        id,
+      });
+    } else {
+      req = store.add(document);
+    }
+
+    req.onsuccess = () => {
+      // console.log("自动保存成功");
+      resolve();
+    };
+    req.onerror = (event) => {
+      message.error("自动保存失败");
+      reject(event);
+    };
+  });
+};
+
+export const setLocalDraft = (db, localDocuments, document = {}) => {
+  const draft = localDocuments[0];
+  if (draft && document.Content === draft.Content) {
+    console.log("草稿未更新，不进行本地保存。");
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["customers"], "readwrite");
+    const store = transaction.objectStore("customers");
+
+    // Info: 更新草稿
+    const {id} = draft;
+    const req = store.put({
+      ...document,
+      id,
+    });
+
+    req.onsuccess = () => {
+      // console.log("自动保存草稿成功");
+      resolve();
+    };
+    req.onerror = (event) => {
+      message.error("自动保存草稿失败");
+      reject(event);
+    };
+  });
+};

src/component/MenuLeft/CodeTheme.css

@@ -0,0 +1,13 @@
+.nice-codetheme-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 12px 5px 6px;
+}
+.nice-codetheme-item-name {
+  margin-right: 10px;
+}
+.nice-codetheme-item-flag {
+  display: inline-block;
+  width: 16px;
+  margin-right: 4px;
+}

src/component/MenuLeft/CodeTheme.js

@@ -0,0 +1,66 @@
+import React from "react";
+import {Menu, Dropdown} from "antd";
+import {observer, inject} from "mobx-react";
+
+import {CODE_OPTIONS, RIGHT_SYMBOL, IS_MAC_CODE} from "../../utils/constant";
+import "./CodeTheme.css";
+
+@inject("navbar")
+@observer
+class CodeTheme extends React.Component {
+  changeCodeTheme = (item) => {
+    // 是否为 Mac 风格代码
+    if (item.key === IS_MAC_CODE) {
+      const {isMacCode, codeNum} = this.props.navbar;
+      if (isMacCode) {
+        this.props.navbar.setMacCode(false);
+        this.props.navbar.setCodeNum(codeNum, false);
+      } else {
+        this.props.navbar.setMacCode(true);
+        this.props.navbar.setCodeNum(codeNum, true);
+      }
+    } else {
+      const {isMacCode} = this.props.navbar;
+      const codeNum = parseInt(item.key, 10);
+      this.props.navbar.setCodeNum(codeNum, isMacCode);
+    }
+  };
+
+  render() {
+    const {codeNum, isMacCode} = this.props.navbar;
+
+    const codeMenu = (
+      <Menu onClick={this.changeCodeTheme}>
+        {CODE_OPTIONS.map((option, index) => (
+          <Menu.Item key={index}>
+            <div id={`nice-menu-codetheme-${option.id}`} className="nice-codetheme-item">
+              <span>
+                <span className="nice-codetheme-item-flag">{codeNum === index && <span>{RIGHT_SYMBOL}</span>}</span>
+                <span className="nice-codetheme-item-name">{option.name}</span>
+              </span>
+            </div>
+          </Menu.Item>
+        ))}
+        <Menu.Divider />
+        <Menu.Item key={IS_MAC_CODE}>
+          <div id="nice-menu-codetheme-apple" className="nice-codetheme-item">
+            <span>
+              <span className="nice-codetheme-item-flag">{isMacCode && <span>{RIGHT_SYMBOL}</span>}</span>
+              <span className="nice-codetheme-item-name">Mac 风格</span>
+            </span>
+          </div>
+        </Menu.Item>
+      </Menu>
+    );
+
+    return (
+      <Dropdown overlay={codeMenu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-codetheme" className="nice-menu-link" href="#">
+          代码主题
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default CodeTheme;

src/component/MenuLeft/File.js

@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import ImportFile from "./File/ImportFile";
+import "./common.css";
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <ImportFile />
+    </Menu.Item>
+  </Menu>
+);
+
+class File extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-file" className="nice-menu-link" href="#">
+          文件
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default File;

src/component/MenuLeft/File/ImportFile.js

@@ -0,0 +1,40 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+import {message} from "antd";
+
+@inject("content")
+@observer
+class ImportFile extends Component {
+  handleChange = (e) => {
+    const file = e.target.files[0];
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      this.props.content.setContent(event.target.result);
+      message.success("导入文件成功！");
+    };
+    reader.readAsText(file);
+  };
+
+  render() {
+    return (
+      <label id="nice-menu-import-file" className="nice-menu-item" htmlFor="importFile">
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">导入</span>
+          <input
+            style={{display: "none"}}
+            type="file"
+            id="importFile"
+            accept=".txt,.md"
+            hidden=""
+            onChange={this.handleChange}
+          />
+        </span>
+      </label>
+    );
+  }
+}
+
+export default ImportFile;

src/component/MenuLeft/Function.js

@@ -0,0 +1,43 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import Reset from "./Function/Reset";
+import Search from "./Function/Search";
+import History from "./Function/History";
+import SitDown from "./Function/SitDown";
+
+import "./common.css";
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <Reset />
+    </Menu.Item>
+    <Menu.Item>
+      <Search />
+    </Menu.Item>
+
+    <Menu.Divider />
+
+    <Menu.Item>
+      <History />
+    </Menu.Item>
+    <Menu.Item>
+      <SitDown />
+    </Menu.Item>
+  </Menu>
+);
+
+class Function extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-function" className="nice-menu-link" href="#">
+          功能
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default Function;

src/component/MenuLeft/Function/History.js

@@ -0,0 +1,25 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class History extends Component {
+  handleClick = () => {
+    this.props.dialog.setHistoryOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-history" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">本地历史</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default History;

src/component/MenuLeft/Function/Reset.js

@@ -0,0 +1,42 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Modal, message} from "antd";
+
+import TEMPLATE from "../../../template/index";
+import "../common.css";
+
+@inject("content")
+@inject("navbar")
+@observer
+class Reset extends Component {
+  showConfirm = () => {
+    Modal.confirm({
+      title: "确认重置么?",
+      content: "重置后将丢失本地保存的文本和自定义样式",
+      okText: "确定",
+      okType: "danger",
+      cancelText: "取消",
+      onOk: () => {
+        this.props.content.setContent(TEMPLATE.content);
+        this.props.content.setStyle(TEMPLATE.normal);
+        this.props.content.setCustomStyle(TEMPLATE.custom);
+        this.props.navbar.setTemplateNum(0);
+        message.success("重置成功！");
+      },
+      onCancel() {},
+    });
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-reset" className="nice-menu-item" onClick={this.showConfirm}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">重置</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Reset;

src/component/MenuLeft/Function/Search.js

@@ -0,0 +1,28 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class Search extends Component {
+  handleClick = () => {
+    this.props.dialog.setSearchOpen(!this.props.dialog.isSearchOpen);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-search" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">查找</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.search}</span>
+      </div>
+    );
+  }
+}
+
+export default Search;

src/component/MenuLeft/Function/SitDown.js

@@ -0,0 +1,25 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class SitDownFunction extends Component {
+  handleClick = () => {
+    this.props.dialog.setSitDownOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-sitdown" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">html转markdown</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default SitDownFunction;

src/component/MenuLeft/Help.js

@@ -0,0 +1,40 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import About from "./Help/About";
+import Version from "./Help/Version";
+import Document from "./Help/Document";
+import Question from "./Help/Question";
+
+import "./common.css";
+
+const menu = (
+  <Menu>
+    {/*<Menu.Item>*/}
+    {/*  <About />*/}
+    {/*</Menu.Item>*/}
+    {/*<Menu.Item>*/}
+    {/*  <Version />*/}
+    {/*</Menu.Item>*/}
+    <Menu.Item>
+      <Document />
+    </Menu.Item>
+    {/*<Menu.Item>*/}
+    {/*  <Question />*/}
+    {/*</Menu.Item>*/}
+  </Menu>
+);
+
+class Help extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-help" className="nice-menu-link" href="#">
+          帮助
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default Help;

src/component/MenuLeft/Help/About.js

@@ -0,0 +1,25 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class About extends Component {
+  handleClick = () => {
+    this.props.dialog.setAboutOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-about" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">关于</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default About;

src/component/MenuLeft/Help/Document.js

@@ -0,0 +1,23 @@
+import React, {Component} from "react";
+
+import "../common.css";
+
+class Document extends Component {
+  handleClick = () => {
+    const w = window.open("about:blank");
+    w.location.href = "https://doc.luckday.cn";
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-document" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">更多文档</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Document;

src/component/MenuLeft/Help/Question.js

@@ -0,0 +1,23 @@
+import React, {Component} from "react";
+
+import "../common.css";
+
+class Question extends Component {
+  handleClick = () => {
+    const w = window.open("about:blank");
+    w.location.href = "https://github.com/shenweiyan/Markdown2Html/issues/new";
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-question" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">我要提问</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Question;

src/component/MenuLeft/Help/Version.js

@@ -0,0 +1,25 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class Version extends Component {
+  handleClick = () => {
+    this.props.dialog.setVersionOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-version" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">版本信息</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Version;

src/component/MenuLeft/Help/Version.js.default

@@ -0,0 +1,25 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class Version extends Component {
+  handleClick = () => {
+    this.props.dialog.setVersionOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-version" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">版本信息</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Version;

src/component/MenuLeft/Help/Version.js.new

@@ -0,0 +1,23 @@
+import React, {Component} from "react";
+
+import "../common.css";
+
+class Question extends Component {
+  handleClick = () => {
+    const w = window.open("about:blank");
+    w.location.href = "";
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-question" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">版本信息</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Version;

src/component/MenuLeft/LogIn.js

@@ -0,0 +1,60 @@
+import React from "react";
+import {Tooltip, Button} from "antd";
+import {observer, inject} from "mobx-react";
+import axios from "axios";
+
+import {CLIENT_ID, CLIENT_SECRET, PROXY, ACCESS_TOKEN, ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import {queryParse, axiosJSON, axiosGithub} from "../../utils/helper";
+import SvgIcon from "../../icon";
+
+@inject("userInfo")
+@observer
+class LogIn extends React.Component {
+  constructor(props) {
+    super(props);
+    this.code = queryParse().code;
+    if (this.code) {
+      this.loginBack();
+    }
+    const TOKEN = localStorage.getItem(ACCESS_TOKEN);
+    if (TOKEN) {
+      axios.defaults.headers.common.Authorization = `token ${TOKEN}`;
+      this.getUserInfo();
+    }
+  }
+
+  login = () => {
+    window.location.href = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&scope=public_repo`;
+  };
+
+  loginBack = async () => {
+    const res = await axiosJSON.post(PROXY, {
+      code: this.code,
+      client_id: CLIENT_ID,
+      client_secret: CLIENT_SECRET,
+    });
+    localStorage.setItem(ACCESS_TOKEN, res.data.access_token);
+    window.location.href = "/";
+  };
+
+  getUserInfo = async () => {
+    try {
+      const res = await axiosGithub.get(`/user`);
+      this.props.userInfo.setUserInfo(res.data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  render() {
+    return (
+      <Tooltip placement="bottom" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="登录">
+        <Button shape="circle" className="nice-btn-login" onClick={this.login}>
+          <SvgIcon name="github" className="nice-btn-login-icon" />
+        </Button>
+      </Tooltip>
+    );
+  }
+}
+
+export default LogIn;

src/component/MenuLeft/Login.css

@@ -0,0 +1,10 @@
+.nice-btn-login {
+  border: none;
+  width: 24px;
+  height: 24px;
+}
+
+.nice-btn-login-icon {
+  width: 24px;
+  height: 24px;
+}

src/component/MenuLeft/Paragraph.js

@@ -0,0 +1,38 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import "./common.css";
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="#">
+        导出
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="#">
+        导入
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="#">
+        打印
+      </a>
+    </Menu.Item>
+  </Menu>
+);
+
+class Paragraph extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a className="nice-menu-link" href="#">
+          段落
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default Paragraph;

src/component/MenuLeft/Pattern.js

@@ -0,0 +1,74 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import Bold from "./Pattern/Bold";
+import Code from "./Pattern/Code";
+import Del from "./Pattern/Del";
+import Italic from "./Pattern/Italic";
+import Link from "./Pattern/Link";
+import Form from "./Pattern/Form";
+import Image from "./Pattern/Image";
+import Format from "./Pattern/Format";
+import LinkToFoot from "./Pattern/LinkToFoot";
+import Font from "./Pattern/Font";
+import InlineCode from "./Pattern/InlineCode";
+
+import "./common.css";
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <Del />
+    </Menu.Item>
+    <Menu.Item>
+      <Bold />
+    </Menu.Item>
+    <Menu.Item>
+      <Italic />
+    </Menu.Item>
+    <Menu.Item>
+      <Code />
+    </Menu.Item>
+    <Menu.Item>
+      <InlineCode />
+    </Menu.Item>
+
+    <Menu.Divider />
+
+    <Menu.Item>
+      <Link />
+    </Menu.Item>
+    <Menu.Item>
+      <Form />
+    </Menu.Item>
+    <Menu.Item>
+      <Image />
+    </Menu.Item>
+    <Menu.Item>
+      <Font />
+    </Menu.Item>
+
+    <Menu.Divider />
+
+    <Menu.Item>
+      <LinkToFoot />
+    </Menu.Item>
+    <Menu.Item>
+      <Format />
+    </Menu.Item>
+  </Menu>
+);
+
+class Pattern extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-pattern" className="nice-menu-link" href="#">
+          格式
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default Pattern;

src/component/MenuLeft/Pattern/Bold.js

@@ -0,0 +1,37 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {bold} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class Bold extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    bold(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-bold" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">加粗</span>
+        </span>
+
+        <span className="nice-menu-shortcut">{hotKeys.bold}</span>
+      </div>
+    );
+  }
+}
+
+export default Bold;

src/component/MenuLeft/Pattern/Code.js

@@ -0,0 +1,36 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {code} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class Code extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    code(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-code" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">代码</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.code}</span>
+      </div>
+    );
+  }
+}
+
+export default Code;

src/component/MenuLeft/Pattern/Del.js

@@ -0,0 +1,36 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {del} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class Del extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    del(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-del" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">删除线</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.del}</span>
+      </div>
+    );
+  }
+}
+
+export default Del;

src/component/MenuLeft/Pattern/Font.js

@@ -0,0 +1,43 @@
+import React, {Component} from "react";
+import {message} from "antd";
+
+import {FONT_THEME_ID, RIGHT_SYMBOL} from "../../../utils/constant";
+import {replaceStyle} from "../../../utils/helper";
+import "../common.css";
+
+class Font extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSerif: false,
+    };
+  }
+
+  // 衬线字体 和 非衬线字体 切换
+  toggleFont = () => {
+    const {isSerif} = this.state;
+    const serif = `#nice { 
+      font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    }`;
+    const sansSerif = `#nice { 
+      font-family: Roboto, Oxygen, Ubuntu, Cantarell, PingFangSC-light, PingFangTC-light, 'Open Sans', 'Helvetica Neue', sans-serif;
+    }`;
+    const choosen = isSerif ? serif : sansSerif;
+    replaceStyle(FONT_THEME_ID, choosen);
+    message.success("字体切换成功！");
+    this.setState({isSerif: !isSerif});
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-font" className="nice-menu-item" onClick={this.toggleFont}>
+        <span>
+          <span className="nice-menu-flag">{!this.state.isSerif && <span>{RIGHT_SYMBOL}</span>}</span>
+          <span className="nice-menu-name">衬线字体</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default Font;

src/component/MenuLeft/Pattern/Form.js

@@ -0,0 +1,28 @@
+import React, {Component} from "react";
+import {inject, observer} from "mobx-react";
+
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class Form extends Component {
+  showModal = () => {
+    this.props.dialog.setFormOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-form" className="nice-menu-item" onClick={this.showModal}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">表格</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.form}</span>
+      </div>
+    );
+  }
+}
+
+export default Form;

src/component/MenuLeft/Pattern/Format.js

@@ -0,0 +1,30 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {formatDoc} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class Format extends Component {
+  handleFormat = () => {
+    const {content} = this.props.content;
+    formatDoc(content, this.props.content);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-format" className="nice-menu-item" onClick={this.handleFormat}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">格式化文档</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.format}</span>
+      </div>
+    );
+  }
+}
+
+export default Format;

src/component/MenuLeft/Pattern/Image.js

@@ -0,0 +1,28 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class Image extends Component {
+  showModal = () => {
+    this.props.dialog.setImageOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-image" className="nice-menu-item" onClick={this.showModal}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">图片</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.image}</span>
+      </div>
+    );
+  }
+}
+
+export default Image;

src/component/MenuLeft/Pattern/InlineCode.js

@@ -0,0 +1,36 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {inlineCode} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class InlineCode extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    inlineCode(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-inline-code" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">行内代码</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.inlineCode}</span>
+      </div>
+    );
+  }
+}
+
+export default InlineCode;

src/component/MenuLeft/Pattern/Italic.js

@@ -0,0 +1,36 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {italic} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class Italic extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    italic(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-italic" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">倾斜</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.italic}</span>
+      </div>
+    );
+  }
+}
+
+export default Italic;

src/component/MenuLeft/Pattern/Link.js

@@ -0,0 +1,28 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("dialog")
+@observer
+class Link extends Component {
+  showModal = () => {
+    this.props.dialog.setLinkOpen(true);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-link" className="nice-menu-item" onClick={this.showModal}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">链接</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.link}</span>
+      </div>
+    );
+  }
+}
+
+export default Link;

src/component/MenuLeft/Pattern/LinkToFoot.js

@@ -0,0 +1,30 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {parseLinkToFoot} from "../../../utils/editorKeyEvents";
+import {hotKeys} from "../../../utils/hotkey";
+
+import "../common.css";
+
+@inject("content")
+@observer
+class Format extends Component {
+  handleFormat = () => {
+    const {content} = this.props.content;
+    parseLinkToFoot(content, this.props.content);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-link-to-foot" className="nice-menu-item" onClick={this.handleFormat}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">微信外链转脚注</span>
+        </span>
+        <span className="nice-menu-shortcut">{hotKeys.linkToFoot}</span>
+      </div>
+    );
+  }
+}
+
+export default Format;

src/component/MenuLeft/Setting.js

@@ -0,0 +1,32 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import SyncScroll from "./Setting/SyncScroll";
+import ContainImgName from "./Setting/ContainImgName";
+
+import "./common.css";
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <SyncScroll />
+    </Menu.Item>
+    <Menu.Item>
+      <ContainImgName />
+    </Menu.Item>
+  </Menu>
+);
+
+class Setting extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-setting" className="nice-menu-link" href="#">
+          设置
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default Setting;

src/component/MenuLeft/Setting/ContainImgName.js

@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {RIGHT_SYMBOL} from "../../../utils/constant";
+import "../common.css";
+
+@inject("navbar")
+@observer
+class SyncScroll extends Component {
+  handleClick = () => {
+    const {isContainImgName} = this.props.navbar;
+    this.props.navbar.setContainImgName(!isContainImgName);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-contain-img-name" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag">{this.props.navbar.isContainImgName && <span>{RIGHT_SYMBOL}</span>}</span>
+          <span className="nice-menu-name">上传图片时包含名称</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default SyncScroll;

src/component/MenuLeft/Setting/SyncScroll.js

@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {RIGHT_SYMBOL} from "../../../utils/constant";
+import "../common.css";
+
+@inject("navbar")
+@observer
+class SyncScroll extends Component {
+  handleClick = () => {
+    const {isSyncScroll} = this.props.navbar;
+    this.props.navbar.setSyncScroll(!isSyncScroll);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-sync-scroll" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag">{this.props.navbar.isSyncScroll && <span>{RIGHT_SYMBOL}</span>}</span>
+          <span className="nice-menu-name">同步滚动</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default SyncScroll;

src/component/MenuLeft/Theme.css

@@ -0,0 +1,54 @@
+.nice-themeselect-md-cutom-menu {
+  margin-left: 8px;
+  border: 1px dashed #1890ff;
+}
+.nice-themeselect-md-menu {
+  margin-left: 8px;
+}
+.nice-themeselect-code-menu {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.nice-themeselect-theme-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 12px 5px 6px;
+}
+.nice-themeselect-theme-item-author {
+  color: gray;
+}
+.nice-themeselect-theme-item-name {
+  margin-right: 10px;
+}
+.nice-themeselect-theme-item-new {
+  border-radius: 3px;
+  font-size: 12px;
+  color: #1890ff;
+  background: rgb(230, 247, 255);
+  padding: 0px 5px;
+  margin-left: -5px;
+  line-height: 18px;
+}
+.nice-themeselect-theme-item-flag {
+  display: inline-block;
+  width: 16px;
+  margin-right: 4px;
+}
+.nice-themeselect-icon {
+  width: 18px;
+  height: 18px;
+}
+.nice-themeselect-menu-item {
+  clear: both;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.nice-menu-subscribe-more {
+  font-weight: bold;
+}

src/component/MenuLeft/Theme.js

@@ -0,0 +1,128 @@
+import React from "react";
+import {Menu, Dropdown} from "antd";
+import {observer, inject} from "mobx-react";
+
+import {RIGHT_SYMBOL, TEMPLATE_NUM, MARKDOWN_THEME_ID, STYLE} from "../../utils/constant";
+import {replaceStyle} from "../../utils/helper";
+import TEMPLATE from "../../template/index";
+import "./Theme.css";
+import axios from "axios";
+
+@inject("content")
+@inject("navbar")
+@inject("view")
+@observer
+class Theme extends React.Component {
+  changeTemplate = (item) => {
+    const index = parseInt(item.key, 10);
+    const {themeId, css} = this.props.content.themeList[index];
+    this.props.navbar.setTemplateNum(index);
+
+    // 更新style编辑器
+    if (themeId === "custom") {
+      this.props.content.setCustomStyle();
+      // 切换自定义自动打开css编辑
+      this.props.view.setStyleEditorOpen(true);
+    } else {
+      this.props.content.setStyle(css);
+    }
+  };
+
+  toggleStyleEditor = () => {
+    const {isStyleEditorOpen} = this.props.view;
+    this.props.view.setStyleEditorOpen(!isStyleEditorOpen);
+  };
+
+  subscribeMore = () => {
+    const w = window.open("about:blank");
+    w.location.href = "https://preview.mdnice.com/themes";
+  };
+
+  componentDidMount = async () => {
+    const themeList = [
+      {themeId: "normal", name: "默认主题", css: TEMPLATE.theme.normal},
+      {themeId: "1", name: "橙心", css: TEMPLATE.theme.one},
+      {themeId: "2", name: "姹紫", css: TEMPLATE.theme.two},
+      {themeId: "3", name: "嫩青", css: TEMPLATE.theme.three},
+      {themeId: "4", name: "绿意", css: TEMPLATE.theme.four},
+      {themeId: "5", name: "红绯", css: TEMPLATE.theme.five},
+      {themeId: "6", name: "蓝莹", css: TEMPLATE.theme.six},
+      {themeId: "7", name: "兰青", css: TEMPLATE.theme.seven},
+      {themeId: "8", name: "山吹", css: TEMPLATE.theme.eight},
+      {themeId: "9", name: "网格黑", css: TEMPLATE.theme.wgh},
+      {themeId: "10", name: "极客黑", css: TEMPLATE.theme.ten},
+      {themeId: "11", name: "蔷薇紫", css: TEMPLATE.theme.eleven},
+      {themeId: "12", name: "萌绿风", css: TEMPLATE.theme.twelve},
+      {themeId: "13", name: "全栈蓝", css: TEMPLATE.theme.thirteen},
+      {themeId: "14", name: "极简黑", css: TEMPLATE.theme.fourteen},
+      {themeId: "15", name: "橙蓝风", css: TEMPLATE.theme.fifteen},
+      {themeId: "16", name: "前端之巅同款", css: TEMPLATE.theme.nine},
+      {themeId: "custom", name: "自定义", css: TEMPLATE.theme.custom},
+    ];
+
+    this.props.content.setThemeList(themeList);
+    // 设置一下自定义的规则
+    if (!window.localStorage.getItem(STYLE)) {
+      window.localStorage.setItem(STYLE, TEMPLATE.theme.custom);
+    }
+    const templateNum = parseInt(window.localStorage.getItem(TEMPLATE_NUM), 10);
+
+    // 主题样式初始化，属于自定义主题则从localstorage中读数据
+    let style = "";
+    if (templateNum === themeList.length - 1) {
+      style = window.localStorage.getItem(STYLE);
+    } else {
+      if (templateNum) {
+        const {css} = themeList[templateNum];
+        style = css;
+      } else {
+        style = TEMPLATE.normal;
+      }
+    }
+    this.props.content.setStyle(style);
+    replaceStyle(MARKDOWN_THEME_ID, style);
+  };
+
+  render() {
+    const {templateNum} = this.props.navbar;
+    const {themeList} = this.props.content;
+
+    const mdMenu = (
+      <Menu onClick={this.changeTemplate}>
+        {themeList.map((option, index) => (
+          <Menu.Item key={index}>
+            <div id={`nice-menu-theme-${option.themeId}`} className="nice-themeselect-theme-item">
+              <span>
+                <span className="nice-themeselect-theme-item-flag">
+                  {templateNum === index && <span>{RIGHT_SYMBOL}</span>}
+                </span>
+                <span className="nice-themeselect-theme-item-name">{option.name}</span>
+                {option.isNew && <span className="nice-themeselect-theme-item-new">new</span>}
+              </span>
+            </div>
+          </Menu.Item>
+        ))}
+        <Menu.Divider />
+        <li className="nice-themeselect-menu-item">
+          <div id="nice-menu-view-css" className="nice-themeselect-theme-item" onClick={this.toggleStyleEditor}>
+            <span>
+              <span className="nice-themeselect-theme-item-flag">
+                {this.props.view.isStyleEditorOpen && <span>{RIGHT_SYMBOL}</span>}
+              </span>
+              <span className="nice-themeselect-theme-item-name">查看主题 CSS</span>
+            </span>
+          </div>
+        </li>
+      </Menu>
+    );
+    return (
+      <Dropdown overlay={mdMenu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-theme" className="nice-menu-link" href="#">
+          主题
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default Theme;

src/component/MenuLeft/View.js

@@ -0,0 +1,43 @@
+import React, {Component} from "react";
+import {Menu, Dropdown} from "antd";
+
+import FullScreen from "./View/FullScreen";
+import EditArea from "./View/EditArea";
+import PreviewArea from "./View/PreviewArea";
+import ThemeArea from "./View/ThemeArea";
+
+import "./common.css";
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <FullScreen />
+    </Menu.Item>
+
+    <Menu.Divider />
+
+    <Menu.Item>
+      <EditArea />
+    </Menu.Item>
+    <Menu.Item>
+      <PreviewArea />
+    </Menu.Item>
+    <Menu.Item>
+      <ThemeArea />
+    </Menu.Item>
+  </Menu>
+);
+
+class View extends Component {
+  render() {
+    return (
+      <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-overlay">
+        <a id="nice-menu-view" className="nice-menu-link" href="#">
+          查看
+        </a>
+      </Dropdown>
+    );
+  }
+}
+
+export default View;

src/component/MenuLeft/View/EditArea.js

@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {RIGHT_SYMBOL} from "../../../utils/constant";
+import "../common.css";
+
+@inject("view")
+@observer
+class EditArea extends Component {
+  handleClick = () => {
+    const {isEditAreaOpen} = this.props.view;
+    this.props.view.setEditAreaOpen(!isEditAreaOpen);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-edit-area" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag">{this.props.view.isEditAreaOpen && <span>{RIGHT_SYMBOL}</span>}</span>
+          <span className="nice-menu-name">编辑区域</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default EditArea;

src/component/MenuLeft/View/FullScreen.js

@@ -0,0 +1,46 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import "../common.css";
+
+@inject("navbar")
+@observer
+class FullScreen extends Component {
+  // fullScreen or !fullScreen
+  toggleFullScreen = () => {
+    const doc = window.document;
+    const docEl = doc.documentElement;
+
+    const requestFullScreen =
+      docEl.requestFullscreen ||
+      docEl.mozRequestFullScreen ||
+      docEl.webkitRequestFullScreen ||
+      docEl.msRequestFullscreen;
+    const cancelFullScreen =
+      doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
+
+    if (
+      !doc.fullscreenElement &&
+      !doc.mozFullScreenElement &&
+      !doc.webkitFullscreenElement &&
+      !doc.msFullscreenElement
+    ) {
+      requestFullScreen.call(docEl);
+    } else {
+      cancelFullScreen.call(doc);
+    }
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-full-screen" className="nice-menu-item" onClick={this.toggleFullScreen}>
+        <span>
+          <span className="nice-menu-flag" />
+          <span className="nice-menu-name">全屏</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default FullScreen;

src/component/MenuLeft/View/PreviewArea.js

@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {RIGHT_SYMBOL} from "../../../utils/constant";
+import "../common.css";
+
+@inject("view")
+@observer
+class PreviewArea extends Component {
+  handleClick = () => {
+    const {isPreviewAreaOpen} = this.props.view;
+    this.props.view.setPreviewAreaOpen(!isPreviewAreaOpen);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-preview-area" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag">{this.props.view.isPreviewAreaOpen && <span>{RIGHT_SYMBOL}</span>}</span>
+          <span className="nice-menu-name">预览区域</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default PreviewArea;

src/component/MenuLeft/View/ThemeArea.js

@@ -0,0 +1,27 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+
+import {RIGHT_SYMBOL} from "../../../utils/constant";
+import "../common.css";
+
+@inject("view")
+@observer
+class ThemeArea extends Component {
+  handleClick = () => {
+    const {isStyleEditorOpen} = this.props.view;
+    this.props.view.setStyleEditorOpen(!isStyleEditorOpen);
+  };
+
+  render() {
+    return (
+      <div id="nice-menu-theme-area" className="nice-menu-item" onClick={this.handleClick}>
+        <span>
+          <span className="nice-menu-flag">{this.props.view.isStyleEditorOpen && <span>{RIGHT_SYMBOL}</span>}</span>
+          <span className="nice-menu-name">主题CSS区域</span>
+        </span>
+      </div>
+    );
+  }
+}
+
+export default ThemeArea;

src/component/MenuLeft/common.css

@@ -0,0 +1,65 @@
+.nice-menu-item {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px 12px 5px 6px;
+}
+
+.nice-menu-shortcut {
+  color: gray;
+}
+
+.nice-menu-name {
+  margin-right: 10px;
+}
+
+.nice-menu-flag {
+  display: inline-block;
+  width: 16px;
+  margin-right: 4px;
+}
+
+.nice-menu-link {
+  color: #fff;
+  font-size: 14px;
+  padding: 8px 10px;
+}
+
+.nice-menu-link:hover {
+  color: #cecece;
+}
+
+.nice-menu-link:focus {
+  color: #cecece;
+  /*background: #e6f7ff;*/
+}
+
+.nice-overlay {
+  top: 56px !important;
+}
+
+.nice-overlay ul {
+  border-radius: 0px 0px 4px 4px;
+}
+
+.nice-overlay ul .ant-dropdown-menu-item {
+  clear: both;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.nice-overlay ul label {
+  cursor: pointer;
+}
+.ant-dropdown-menu {
+  padding: 4px !important;
+}
+.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
+  background-color: #e8e8e8 !important;
+}

src/component/SearchBox/SearchBox.css

@@ -0,0 +1,109 @@
+.mdnice-searchbox {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 20;
+  transition: all 0.15s ease-in-out;
+  padding: 8px;
+  max-width: calc(100% - 40px);
+  background-color: white;
+  height: 72px;
+  box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.mdnice-searchbox-replace {
+  margin-top: 8px;
+  margin-left: 27px;
+}
+
+.mdnice-searchbox > div {
+  display: flex;
+  align-items: center;
+}
+
+.mdnice-searchbox div>:not(:last-child ) {
+  margin-right: 3px;
+}
+
+.mdnice-searchbox div input {
+  width: 160px;
+}
+
+.mdnice-searchbox .searchbox-button {
+  background-color: white;
+  outline: none;
+  padding: 0px;
+  border: none;
+  border-radius: 4px;
+  height: 24px;
+  width: 24px;
+}
+
+.mdnice-searchbox .searchbox-button:active{
+  background-color: #f1f1f1;
+}
+
+.searchbox-icon {
+  display: block;
+  margin: auto;
+  height: 24px;
+  width: 24px;
+  background-color: transparent;
+}
+
+.searchbox-icon-casefold {
+  width: 18px;
+}
+
+.searchbox-icon-prev {
+  transform: rotate(180deg);
+}
+
+.searchbox-icon-replace {
+  width: 16px;
+}
+
+.searchbox-icon-fold {
+  transform: rotate(-90deg);
+  transition: all 0.2s ease-in-out;
+}
+
+.mdnice-searchbox[data-replace="true"]  .searchbox-icon-fold{
+  transform: unset;
+}
+
+.searchbox-text-highlight {
+  background-color: #91d5ff;
+  line-height: 16px;
+  padding: 3px 0px;
+}
+
+/* .mdnice-searchbox[data-active="false"] {
+  max-height: 0px !important;
+  padding-top: 0px;
+  padding-bottom: 0px;
+} */
+
+.mdnice-searchbox[data-replace="false"] {
+  height: 40px;
+}
+
+.mdnice-searchbox[data-replace="false"] .mdnice-searchbox-replace {
+  visibility: hidden;
+}
+/* 
+.mdnice-searchbox ~ div .CodeMirror-sizer {
+  transition: all 0.15s ease-in-out;
+} */
+
+.mdnice-searchbox ~ div .CodeMirror-sizer {
+  top: 40px;  
+}
+
+.mdnice-searchbox[data-replace="true"] ~ div .CodeMirror-sizer {
+  top: 72px;
+}
+
+

src/component/SearchBox/index.js

@@ -0,0 +1,219 @@
+/* eslint-disable react/no-did-update-set-state */
+/* eslint-disable react/no-unused-state */
+import React, {createRef} from "react";
+import {observer, inject} from "mobx-react";
+import {Input, Tooltip} from "antd";
+
+import {ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+
+import SvgIcon from "../../icon";
+
+import "./SearchBox.css";
+
+function WrappedButton(props) {
+  const className = props.className === undefined ? "" : props.className;
+  return (
+    <Tooltip placement="bottom" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title={props.tipText}>
+      <button className="searchbox-button" type="button" onClick={props.onClick}>
+        <SvgIcon name={props.icon} className={`searchbox-icon ${className}`} fill={props.fill} />
+      </button>
+    </Tooltip>
+  );
+}
+
+@inject("content")
+@inject("dialog")
+@observer
+class SearchBox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      replaceText: "",
+      searchText: "",
+      isReplaceOpen: false,
+      cursor: null,
+      caseFold: true,
+    };
+    this.searchRef = createRef();
+  }
+
+  /** false means next, true means previous */
+  posChange = (direction) => {
+    this.clearMarks();
+    if (typeof direction !== "boolean") {
+      return;
+    }
+    const {cursor, searchText} = this.state;
+    if (searchText && cursor) {
+      cursor.find(direction);
+      if (cursor.atOccurrence) {
+        this.highlight();
+      } else {
+        while (cursor.find(!direction)) {
+          //  从头开始寻找
+        }
+        cursor.find(direction);
+        this.highlight();
+      }
+    }
+  };
+
+  handleCaseFold = () => {
+    const {markdownEditor} = this.props.content;
+    this.clearMarks();
+    this.setState(
+      (prevState) => {
+        const caseFold = !prevState.caseFold;
+        const cursor = prevState.searchText
+          ? markdownEditor.getSearchCursor(prevState.searchText, null, {caseFold: caseFold})
+          : null;
+        return {caseFold, cursor};
+      },
+      () => this.posChange(false),
+    );
+  };
+
+  handleScroll = (offset) => {
+    const {markdownEditor} = this.props.content;
+    const {top} = markdownEditor.getScrollInfo(offset);
+    console.log(offset);
+    markdownEditor.scrollTo(null, top + offset);
+  };
+
+  componentWillUnmount = () => {
+    this.handleScroll(this.state.isReplaceOpen ? -72 : -40);
+  };
+
+  componentDidMount = () => {
+    this.searchRef.current.focus();
+    this.handleScroll(40);
+  };
+
+  clearMarks = () => {
+    const {markdownEditor} = this.props.content;
+    // const markers = markdownEditor.getAllMarks();
+    // markers.forEach((marker) => marker.clear());
+    const cursor = markdownEditor.getCursor();
+    markdownEditor.setSelection(cursor);
+  };
+
+  findContent = (value) => {
+    const {markdownEditor} = this.props.content;
+    this.setState(
+      (prevState) => {
+        const cursor = value ? markdownEditor.getSearchCursor(value, null, {caseFold: prevState.caseFold}) : null;
+        return {searchText: value, cursor};
+      },
+      () => this.posChange(false),
+    );
+  };
+
+  highlight = () => {
+    // 高亮前需检测是否有匹配
+    if (this.state.cursor.atOccurrence) {
+      const {markdownEditor} = this.props.content;
+      const from = this.state.cursor.from();
+      const to = this.state.cursor.to();
+
+      // markdownEditor.markText(from, to, {
+      //   className: "searchbox-text-highlight",
+      // });
+      markdownEditor.setSelection(from, to);
+      // 防止搜索框挡住文字
+      markdownEditor.scrollIntoView(from, 200);
+    }
+  };
+
+  replace = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    if (selection) {
+      // 未选中不进行替换
+      markdownEditor.replaceSelection(this.state.replaceText);
+
+      const content = markdownEditor.getValue();
+      this.props.content.setContent(content);
+      this.posChange(false);
+    }
+  };
+
+  replaceAll = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    if (selection && this.state.searchText) {
+      const content = markdownEditor.getValue();
+      const searchReg = new RegExp(this.state.searchText, "g");
+      const replaced = content.replace(searchReg, this.state.replaceText);
+
+      this.props.content.setContent(replaced);
+    }
+  };
+
+  handelFoldClick = () => {
+    this.setState((prevState) => {
+      const {isReplaceOpen} = prevState;
+      this.handleScroll(isReplaceOpen ? -32 : 32);
+      return {isReplaceOpen: !isReplaceOpen};
+    });
+  };
+
+  handleClose = () => {
+    this.props.dialog.setSearchOpen(false);
+    this.clearMarks();
+  };
+
+  render() {
+    const {isReplaceOpen} = this.state;
+
+    return (
+      <div data-replace={isReplaceOpen} className="mdnice-searchbox">
+        <div>
+          <WrappedButton icon="down" tipText="展开" onClick={this.handelFoldClick} className="searchbox-icon-fold" />
+          <Input
+            size="small"
+            value={this.state.searchText}
+            placeholder="按Enter进行查找"
+            onChange={(e) => this.findContent(e.target.value)}
+            onPressEnter={() => this.posChange(false)}
+            ref={this.searchRef}
+          />
+          <WrappedButton
+            icon="fontCase"
+            onClick={this.handleCaseFold}
+            tipText="忽略大小写"
+            className="searchbox-icon-casefold"
+            fill={this.state.caseFold ? "red" : undefined}
+          />
+          <WrappedButton
+            icon="down"
+            className="searchbox-icon-prev"
+            onClick={() => this.posChange(true)}
+            tipText="上一个"
+          />
+          <WrappedButton icon="down" onClick={() => this.posChange(false)} tipText="下一个" />
+          <WrappedButton icon="close" onClick={this.handleClose} tipText="关闭" />
+        </div>
+        <div className="mdnice-searchbox-replace">
+          <Input
+            size="small"
+            value={this.state.replaceText}
+            placeholder="按Enter进行替换"
+            onChange={(e) => {
+              this.setState({replaceText: e.target.value});
+            }}
+            onPressEnter={this.replace}
+          />
+          <WrappedButton icon="replace" className="searchbox-icon-replace" onClick={this.replace} tipText="替换" />
+          <WrappedButton
+            icon="replaceAll"
+            className="searchbox-icon-replace"
+            onClick={this.replaceAll}
+            tipText="替换所有"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SearchBox;

src/component/Sidebar/ExportPdf.js

@@ -0,0 +1,32 @@
+import {Tooltip} from "antd";
+import React, {Component} from "react";
+import SvgIcon from "../../icon";
+import {ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import {observer, inject} from "mobx-react";
+
+import "./pdf.css";
+
+@inject("content")
+@inject("navbar")
+@inject("imageHosting")
+@inject("dialog")
+@observer
+class Pdf extends Component {
+  handleClick = () => {
+    setTimeout(() => {
+      window.print();
+    }, 500);
+  };
+
+  render() {
+    return (
+      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="导出PDF">
+        <a id="nice-sidebar-pdf" className="nice-btn-pdf" onClick={this.handleClick}>
+          <SvgIcon name="pdf" className="nice-btn-pdf-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default Pdf;

src/component/Sidebar/Juejin.css

@@ -0,0 +1,10 @@
+.nice-btn-juejin {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.nice-btn-juejin-icon {
+  padding: 5px 5px 5px 2px;
+  width: 30px;
+  height: 28px;
+}

src/component/Sidebar/Juejin.js

@@ -0,0 +1,48 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {message, Tooltip} from "antd";
+
+import {solveHtml, solveJuejinMath, solveJuejinCode, addJuejinSuffix, copySafari} from "../../utils/converter";
+import {LAYOUT_ID, CODE_NUM, ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import SvgIcon from "../../icon";
+import "./Juejin.css";
+
+@inject("content")
+@inject("navbar")
+@inject("imageHosting")
+@inject("dialog")
+@observer
+class Juejin extends Component {
+  constructor(props) {
+    super(props);
+    this.html = "";
+  }
+
+  copyJuejin = () => {
+    if (window.localStorage.getItem(CODE_NUM) === "0") {
+      message.warning("您当前使用的是微信代码主题，请切换其他代码主题后再试！");
+      return;
+    }
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveJuejinMath();
+    addJuejinSuffix();
+    this.html = solveHtml();
+    this.html = solveJuejinCode(this.html);
+    copySafari(this.html);
+    message.success("已复制且添加 mdnice 排版后缀，感谢宣传，请到稀土掘金粘贴");
+    layout.innerHTML = html; // 恢复现场
+  };
+
+  render() {
+    return (
+      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="复制到稀土掘金">
+        <a id="nice-sidebar-juejin" className="nice-btn-juejin" onClick={this.copyJuejin}>
+          <SvgIcon name="juejin" className="nice-btn-juejin-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default Juejin;

src/component/Sidebar/Markdown.css

@@ -0,0 +1,10 @@
+.nice-btn-markdwon {
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+.nice-btn-markdown-icon {
+    padding: 5px 5px 5px 2px;
+    width: 32px;
+    height: 32px;
+}

src/component/Sidebar/Markdown.js

@@ -0,0 +1,35 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {message, Tooltip} from "antd";
+import SvgIcon from "../../icon";
+
+import {ENTER_DELAY, LEAVE_DELAY, EXPORT_FILENAME_SUFFIX} from "../../utils/constant";
+import {download, dateFormat} from "../../utils/helper";
+
+import "./Markdown.css";
+
+@inject("content")
+@observer
+class ExportMarkdown extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const content = markdownEditor.getValue();
+    if ("download" in document.createElement("a")) {
+      download(content, dateFormat(new Date(), "yyyy-MM-dd") + EXPORT_FILENAME_SUFFIX);
+    } else {
+      message.warn("浏览器不支持");
+    }
+  };
+
+  render() {
+    return (
+      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="导出Markdown">
+        <a id="nice-sidebar-markdown" className="nice-btn-markdown" onClick={this.handleClick}>
+          <SvgIcon name="markdown" className="nice-btn-markdown-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default ExportMarkdown;

src/component/Sidebar/PreviewType.css

@@ -0,0 +1,10 @@
+.nice-btn-previewtype {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.nice-btn-previewtype-icon {
+  padding: 7px;
+  width: 30px;
+  height: 30px;
+}

src/component/Sidebar/PreviewType.js

@@ -0,0 +1,29 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Tooltip} from "antd";
+
+import {ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import SvgIcon from "../../icon";
+import "./PreviewType.css";
+
+@inject("navbar")
+@observer
+class PreviewType extends Component {
+  handleClick = (key) => {
+    this.props.navbar.setPreviewType(key);
+  };
+
+  render() {
+    const targetType = this.props.navbar.previewType === "pc" ? "mobile" : "pc";
+
+    return (
+      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="预览模式">
+        <a id="nice-sidebar-preview-type" className="nice-btn-previewtype" onClick={() => this.handleClick(targetType)}>
+          <SvgIcon name={targetType} className="nice-btn-previewtype-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default PreviewType;

src/component/Sidebar/Wechat.css

@@ -0,0 +1,10 @@
+.nice-btn-wechat {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.nice-btn-wechat-icon {
+  padding: 6px;
+  width: 30px;
+  height: 30px;
+}

src/component/Sidebar/Wechat.js

@@ -0,0 +1,42 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {message, Tooltip} from "antd";
+
+import {solveWeChatMath, solveHtml, copySafari} from "../../utils/converter";
+import {LAYOUT_ID, ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import SvgIcon from "../../icon";
+import "./Wechat.css";
+
+@inject("content")
+@inject("navbar")
+@inject("imageHosting")
+@inject("dialog")
+@observer
+class Wechat extends Component {
+  constructor(props) {
+    super(props);
+    this.html = "";
+  }
+
+  copyWechat = () => {
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveWeChatMath();
+    this.html = solveHtml();
+    copySafari(this.html);
+    message.success("已复制，请到微信公众平台粘贴");
+    layout.innerHTML = html; // 恢复现场
+  };
+
+  render() {
+    return (
+      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="复制到公众号">
+        <a id="nice-sidebar-wechat" className="nice-btn-wechat" onClick={this.copyWechat}>
+          <SvgIcon name="wechat" className="nice-btn-wechat-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default Wechat;

src/component/Sidebar/Zhihu.css

@@ -0,0 +1,10 @@
+.nice-btn-zhihu {
+  padding: 0;
+  margin-bottom: 10px;
+}
+
+.nice-btn-zhihu-icon {
+  padding: 5px;
+  width: 30px;
+  height: 30px;
+}

src/component/Sidebar/Zhihu.js

@@ -0,0 +1,46 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {message, Tooltip} from "antd";
+
+import {solveHtml, solveZhihuMath, copySafari} from "../../utils/converter";
+import {LAYOUT_ID, CODE_NUM, ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import SvgIcon from "../../icon";
+import "./Zhihu.css";
+
+@inject("content")
+@inject("navbar")
+@inject("imageHosting")
+@inject("dialog")
+@observer
+class Zhihu extends Component {
+  constructor(props) {
+    super(props);
+    this.html = "";
+  }
+
+  copyZhihu = () => {
+    if (window.localStorage.getItem(CODE_NUM) === "0") {
+      message.warning("您当前使用的是微信代码主题，请切换其他代码主题后再试！");
+      return;
+    }
+    const layout = document.getElementById(LAYOUT_ID); // 保护现场
+    const html = layout.innerHTML;
+    solveZhihuMath();
+    this.html = solveHtml();
+    copySafari(this.html);
+    message.success("已复制，请到知乎粘贴");
+    layout.innerHTML = html; // 恢复现场
+  };
+
+  render() {
+    return (
+      <Tooltip placement="left" mouseEnterDelay={ENTER_DELAY} mouseLeaveDelay={LEAVE_DELAY} title="复制到知乎">
+        <a id="nice-sidebar-zhihu" className="nice-btn-zhihu" onClick={this.copyZhihu}>
+          <SvgIcon name="zhihu" className="nice-btn-zhihu-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default Zhihu;

src/component/Sidebar/pdf.css

@@ -0,0 +1,10 @@
+.nice-btn-pdf {
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+.nice-btn-pdf-icon {
+    padding: 6px;
+    width: 30px;
+    height: 30px;
+}

src/component/Toolbar/Bold.js

@@ -0,0 +1,42 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {Tooltip} from "antd";
+import {ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+
+import SvgIcon from "../../icon";
+import {bold} from "../../utils/editorKeyEvents";
+import {hotKeys} from "../../utils/hotkey";
+
+import "./common.css";
+
+@inject("content")
+@observer
+class Bold extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    bold(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <Tooltip
+        placement="bottom"
+        mouseEnterDelay={ENTER_DELAY}
+        mouseLeaveDelay={LEAVE_DELAY}
+        title={"快捷键：" + hotKeys.bold}
+      >
+        <a id="nice-sidebar-bold" className="nice-btn-tool" onClick={this.handleClick}>
+          <SvgIcon name="bold" className="nice-btn-tool-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default Bold;

src/component/Toolbar/Code.js

@@ -0,0 +1,42 @@
+import React, {Component} from "react";
+import {observer, inject} from "mobx-react";
+import {ENTER_DELAY, LEAVE_DELAY} from "../../utils/constant";
+import {Tooltip} from "antd";
+
+import {code} from "../../utils/editorKeyEvents";
+import {hotKeys} from "../../utils/hotkey";
+import SvgIcon from "../../icon";
+
+import "./common.css";
+
+@inject("content")
+@observer
+class Code extends Component {
+  handleClick = () => {
+    const {markdownEditor} = this.props.content;
+    const selection = markdownEditor.getSelection();
+    code(markdownEditor, selection);
+
+    // 上传后实时更新内容
+    const content = markdownEditor.getValue();
+    this.props.content.setContent(content);
+    markdownEditor.focus();
+  };
+
+  render() {
+    return (
+      <Tooltip
+        placement="bottom"
+        mouseEnterDelay={ENTER_DELAY}
+        mouseLeaveDelay={LEAVE_DELAY}
+        title={"快捷键：" + hotKeys.code}
+      >
+        <a id="nice-sidebar-code" className="nice-btn-tool" onClick={this.handleClick}>
+          <SvgIcon name="code" className="nice-btn-tool-icon" />
+        </a>
+      </Tooltip>
+    );
+  }
+}
+
+export default Code;