georgiowan / oi

A WYSIWYG Editor to create slides in impress.js.

✨ BIG NEWS ✨

I rewrite the framework of impress.js with ReactJS, it's called React-impressJS

React-impressJS provides the better way to build a React App, it operate Steps with Virtual DOM but not DOM!

If you are playing impress.js with ReactJS, you should give it a shot!!

And please stay tuned for [ Oi ] ☺️

2017/03/28, OAwan

The NEW VERSION is under development.

It'll be more friendly to use, more powerful and more impressive!

Please stay tuned, Coming soon!! 😉

2016/11/15, OAwan

[ Oi ]

A WYSIWYG Editor to create slides in impress.js.

Have a BIG thought and try [ Oi ] out !

You must first know

• What is impress.js, and how it works.
• What is React and Redux.
• Familiar with es2015 (ES6).

Current progress

Features

• Create step
• Edit every step in slides
• Delete step but not the #OVERVIEW
• Download the slides as HTML with basic style ( [ NEW! ] Download with hint and author stamp )
• Export the slides as JSON (Now only download a HTML file, but you can import it directly!!)
• The best part is WYSIWYG for impress.js
• [ NEW! ] Import 🎉
• [ NEW! ] Easy guided tours with react-joyride

Todo..

• Support more browser and Pad (Better on Chrome now)
• Validation of input
• Import
• More theme to choose (Only basic style for slides from impress.js demo currently)
• Optimize component re-render (TinymceEditor, EditPanel, etc.)
• Improve the UX/UI (please help... T^T)
• Maybe OAuth(?)

... anything you thought please PR or give an issue, thanks!!!

Wonderful works via [ Oi ]

https://project.oawan.me/Oi - [ Oi ]

If you have any work of slides or website via [ Oi ], please let me know (leave an issue or push a PR), I'd love to share your wonderful works!!

Development/Building

1. This project made by React with Redux, you can checkout Dependencies first.
2. And you can develop with Redux DevTools Extension, checkout Additional

Let's start

1. Install NodeJS.
2. Fork this project or clone it git clone https://github.com/GeorgioWan/Oi.git .
3. cd Oi
4. Install development dependencies npm install .
5. Please checkout your branch git checkout -b YOUR-BRANCH-NAME .
6. Start to develop npm run dev (it will run with webpack-dev-server)

Additional

You can develop [ Oi ] with redux-devtools-extension, it can show you what action you dispatch and what's change in state.

Start with

• react-hot-boilerplate

Dependencies

React

• React
• Redux

Webpack

• Webpack
• webpack-dev-server
• babel-loader
• react-hot-loader

Others

• TinyMCE - [ Oi ] current HTML editor.
• react-bootstrap
• react-joyride - Guided tours for [ Oi ].
• redux-devtools-extension
• Animate.css

License

Copyright © 2016 Georgio Wan - MIT License

oi's Issues

EditPanel RWD 問題

目前沒考慮好螢幕尺寸過小的問題..

Import [Oi]

Hello GeorgioWan (and thanks for your great work by the way)
The button "Import your [Oi]" on the editor doesn't seem to work on my machine (using Firefox as navigator) : nothing happens when it is clicked.
As you crossed it from the todo list on the main page, I thought it may be a bug ?

More Theme to choose

現在只有 impress.js demo 的 style，需要更活潑多元的 theme

Import 功能

Edit Content re-render 的問題

由於目前 Component re-render 沒設計好，所以編輯完更新時，輸入指標會移到最後面

Hint or Teaching step

需要入門操作教學
maybe try bootstrap-tour

圖片的問題

黃同學提出致命的問題：
如果投影片中有圖片(目前採連結的方式)，拿到沒網路的地方就GG了

我：嗯.... (OS: 幹！丟吼)

輸入驗證的問題

Add 和 Edit 的 props input 需要作輸入驗證 (only for num)

react-joyride fails to build on @import

im at MacOS 10.12.6 with node -v 8.4.0 npm 5.3.0
My homebrew installation lets the npm run dev fail.

ERROR in ./~/css-loader!./~/sass-loader!./src/styles/scss/oi_editor.scss
Module build failed: 
@import '../../../node_modules/react-joyride/lib/styles/react-joyride';
^
      File to import not found or unreadable: ../../../node_modules/react-joyride/lib/styles/react-joyride
Parent style sheet: stdin
      in /Users/novski/Sites/Oi/src/styles/scss/oi_editor.scss (line 8, column 1)
 @ ./src/styles/scss/oi_editor.scss 4:14-128 13:2-17:4 14:20-134
webpack: Failed to compile.

is this Issue reproducible?

Oi is very broken - cannot save, cannot add pages, cannot delete pages.

I do not understand why.
I have tried both Firefox 62.0.3 and Chrome 69.0.3497.100.
I have tried using the online demo and a locally built version.
Nothing works. Why? Please help!

Some Questions

Hi,

the tool looks very great!

I'm missing two functions, maybe I only didn't see them. :-)

1. First reordering for the slides is only possible by export and import the project?
2. It would be cool, when you could change the position of the slides by drag-and-drop